Does jQuery jqGrid support horizontal scroll bar and frozen columns?

Question

I have a jqGrid with a lot of columns, and it shows up like this when the sum of the column widths are bigger than the fixed width container:

Instead of having a horizontal scroll bar if the width of the grid is too big.

How can I get a horizontal scroll bar for jQgrid so there is a fixed max size of the grid and if I add more columns it will simply scroll?

Also, assuming this is possible, can you freeze the first few columns?

Answer 1

Probably you use forceFit:true jqGrid option. First of all you should set forceFit:false or use shrinkToFit:false. After that you can either use width option of jqGrid or use setGridWidth method to set grid width. You will have grid where the column header correspond to the width property of the column and the grid will have horizontal scrollbar.

UPDATED: Try to set shrinkToFit:false and width:600 (for example) and see the results.

After setting only shrinkToFit:false you can see that the grid will have the horizontal scroll bar. You will see it even the grid is small enough to be displayed without the scrolling. It is a bug which I posted here together with the corresponding bug fix. The fix is included in the the code on the GitHub, but not included in the jqGrid 3.8.2. The next jqGrid release will have the fix. Nevertheless for your purpose the wrong width is not important because you will/can set the width of grid explicitly.

Answer 2

you can get horizontal scroll bar with static or auto size fields by wrapping the grid and pager with a div and run a small script,
you can see the jsfiddle-example, or just go like so:

<div id="grid_container">
  <table id="list"></table>
  <div id="pager"></div>
</div>

and run this script:

$('#grid_container div:not(.ui-jqgrid-titlebar)').width("100%");    

my example is using the script from trirand.com but iv tried it on their newest release and it worked just fine.
hope i've helped.