Show scrollbar with jqGrid, when grid initially wider than page

Question

I am using jqGrid in various places throughout a web app. I want to use specified column widths (which I don't want to be changed to avoid wrapping/text cut off) and if the total of the column widths for a particular grid goes over the page width I want a scroll bar to appear on the grid, not on the page. Is this possible with jqGrid options, or would some extra javascript be required as I haven't been able to get this behaviour.

score 2 · Accepted Answer · answered Nov 19 '12 at 10:33

2

You can limit the width of the grid by setting it's width option (also remember you need to set shrinkToFit: false in your options), for example:

$('#gridId').jqGrid({
    ...
    shrinkToFit: false,
    width: $(document).width()
});

This can also be changed dynamically (for example on page resize) with setGridWidth method:

$('#gridId').jqGrid('setGridWidth', $(document).width())

answered Nov 19 '12 at 10:33

tpeczek

23,867
3
74
77

Thanks! I used the setGridWidth and that did the trick...after I amended the wrapper that we use to create grids - it didn't enable setting shrinkToFit to false! – Rich Whitfield Nov 19 '12 at 14:08
This doesn't present a horizontal scrollbar though, it just seems to do overflow:hidden – Developer Webs Mar 17 '20 at 16:19

score 0 · Answer 2 · edited May 23 '17 at 12:12

I am not sure that I understand you corrects: there are many opinions what is the best way to set the width of the grid.

In general you should use shrinkToFit: false and not use and width option of jqGrid if you want to have exact widths of columns like you specified in colModel. You can use fixed: true property for some columns if you don't want that the user be able to change the column width with respect of drop&drag of the partition between of the column header.

Additionally I recommend you to read another answer where I describe how one can modify the code of jqGrid so that the total width of the grid would be adjusted after the user resize the column. I am not sure that you want exactly the behavior. I personally use this approach.

Show scrollbar with jqGrid, when grid initially wider than page

2 Answers2