jQuery Grid Plugin - jqGrid

Hi,

Thought I would share how I got jqGrid to behave in the way I wanted as the container/page resized in width.

I wanted to preserve the column model, refrain from expanding past the container/page width and forcing the horizontal scroll bar to kick in, at the same time not to strech if there are not enough columns to fit the container.

The data I was displaying could have any number of columns in it, of varying sizses, and the container/page can also vary in width based on user prefrences/screen size or browser window.

Fist thing to do is diasble  ShrinkToFit="false"

Then add some css rules to your page, overriding the ui rules: -

/*stops the grid expanding past the bounds of the container, but allows it to shrink below when there are too few columns*/

.ui-jqgrid-htable,
.ui-jqgrid-btable,
.ui-jqgrid-pager,
.ui-jqgrid-view,
.ui-jqgrid-bdiv,
.ui-jqgrid-hdiv,
.ui-jqgrid-hbox,
.ui-jqgrid { max-width: 100% !important; }

/*this fixes a bug when you fully scroll to the right when you have many columns in the grid*/

.ui-jqgrid-htable { padding-right: 17px; }
.ui-jqgrid-hbox { padding-right: 0px !important; }

If you want small grids (low column count) to expand and use the full width of the container, you can add a width rule: -

.ui-jqgrid-htable,
.ui-jqgrid-btable,
.ui-jqgrid-pager,
.ui-jqgrid-view,
.ui-jqgrid-bdiv,
.ui-jqgrid-hdiv,
.ui-jqgrid-hbox,
.ui-jqgrid { max-width: 100% !important; width:100% !important; }

Hope this helps someone 🙂