jQgrid 100% width

Question

I have tried following code for 100% width of my jQgrid.

height: "100%",
autowidth: true,

And I have changed css - from fixed layout to auto (reference from another thread) to avoid unnecessary horizontal bar.

.ui-jqgrid .ui-jqgrid-htable {
   table-layout: auto;
   margin: 0em;
}

and

.ui-jqgrid .ui-jqgrid-btable {
   table-layout: auto;
   margin: 0em;
   outline-style: none;
}

Now issue of horizontal bar is solved but I'm facing new issue in layout which is highlighted in the attached image.

What can I do to avoid this header width mismatch?

Click here for image.

Which version of jqGrid is used? Any chance to have a full example with test data? I think that the problem is rather in the configuration of the data reader and the data. The simple test is to check with very simple grid and data. Please specify which version if jQuery UI and which version of jQuery is used? — Tony Tomov, Jul 08 '17 at 06:20
@BR: 1.9.2 is the version of jQuery or jQuery UI and not the version of **jqGrid**, which is mostly important. — Oleg, Jul 11 '17 at 04:48

B R · Accepted Answer · 2017-07-14T11:20:40.887

2

I have tried a lot but and even upgraded my jqGrid but it was not working. Still recently I tried latest(from GitHub - build date - 11/07/17) jqGrid and it resolved my issue..

edited Jul 14 '17 at 11:20

answered Jul 14 '17 at 04:22

B R

51
1
10

The current answer contains no information. You didn't answer on the question **which fork of jqGrid you use**. There are two main forks, which you can find on GitHub: [free jqGrid](https://github.com/free-jqgrid/jqGrid) and [Guriddo jqGrid JS](https://github.com/tonytomov/jqGrid). Which one you use noq and which one you used before? – Oleg Jul 14 '17 at 04:55
1

OK. I see, that you decided for **commercial** Guriddo jqGrid JS. Don't forget to buy it. See [here](http://guriddo.net/?page_id=103334) the prices. – Oleg Jul 14 '17 at 11:34
@Oleg Thanks for pointing to prices. And actually I tried once with [free grid](https://github.com/free-jqgrid/jqGrid) (updated on - 09/07/17) and that also solved my issue. – B R Jul 15 '17 at 10:44
You are welcome! I'm glad to know that. I develop free jqGrid fork based on jqGrid 4.7 - the last free version of old jqGrid. I try to hold the maximal compatibility to old jqGrid, but still rewrite many parts of origimal code and implement a lot of new features. [The page](https://free-jqgrid.github.io/getting-started/index.html) provides short introduction, [The wiki](https://github.com/free-jqgrid/jqGrid/wiki) describes some new features and READMEs to every published version describes the changes more detailed. – Oleg Jul 15 '17 at 11:17
@Oleg I viewed documents..It's really good nut want to know one thing is that any precise document for subgrid/grid as subgrid with asp.net? – B R Jul 22 '17 at 05:33
Subgrid functionality is the same as before (see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid)). One need understand that subgrid creates row with empty cells and the code of *your* callbacl `subGridRowExpanded` is responsible for filling the divs with *any information*, inclusive the data. I recommend you to read the following old answers [this one](https://stackoverflow.com/a/31567652/315935), [this one](https://stackoverflow.com/a/35503663/315935) and [another one](https://stackoverflow.com/a/43953052/315935) for more information and code examples. – Oleg Jul 22 '17 at 07:47

score 0 · Answer 2 · answered Jul 08 '17 at 10:33

Changing of table-layout to auto is absolutely wrong and it could be the origin of your problem. jqGrid hold column headers and the data in separate tables table.ui-jqgrid-htable and table.ui-jqgrid-btable. Setting table-layout: auto; will break column width in case of having long content in the grid. Nevertheless I think you have another problem, because the picture, which you included, has no long string.

One can solve your problem only if you would provide the demo, which reproduce the problem. I guess that real origin of your problem is not described in your question. I suppose that you increased the font-size and pagging and did it not full correctly. Typical error which I seen before was increasing of pagging of inside of main data (.ui-jqgrid tr.jqgrow > td) without making the same changes in the first hidden row .ui-jqgrid tr.jqgfirstrow > td or without changing the settings in the column headers .ui-jqgrid .ui-jqgrid-htable th.

I recommend you to examine the pagging and font-size of the first row of the column header (table.ui-jqgrid-htable) and the grid data (table.ui-jqgrid-btable). I guess that you directly of indirectly changes the setting holding the settings asynchronously (not the same in the column header and the the first row of the grid data).

Thanks @Oleg and I understand your point that I need to do something other than auto layout. And I have checked about font-size as well as type and not an issue about that. And I'll add my complete code soon.. — B R, Jul 11 '17 at 04:08
@BR: You are welcome! I suppose that you have problems not in your **JavaScript code**, but you have CSS conflict. Thus it's better to provide **the demo** (in [FSFiddle](https://jsfiddle.net/) for example), which reproduces the problem. — Oleg, Jul 11 '17 at 04:45

jQgrid 100% width

2 Answers2