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?

Kazbek

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.

Sacci

Hello.... I have added shrinkToFit: false and width property and the jqgrid fits the page, but no scroll bar apppears. Any hint, please? Thanks – Enfilade

@jstuardo: Which version of jqGrid you use? Which web browser in which version you use? Could you provide demo which can be used to reproduce your problem? – Sacci

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.

Temporal

Answer 3

Try to use the fluid jqGrid plugin. Maybe it helps you with your problem with the jqGrid width.

As for the second question, for freezing the first n columns I am successfully using this super plugin for freezing the first columns. You add only one attribute to your colmodel and it works.

Good luck!

Onida