Resize jqGrid based on number of rows?

Question

I want my jqGrid to shrink and expand based on the number of rows it has. Let say it currently has 10 rows, the height of the jqGrid will shrink to 10 rows (so that no gaping empty rows is exposed).

If however there are too many rows, the height of the grid will expand to a maximum 'height' value and a scroll bar will appear.

Answer 1

That's built into the grid. You set height to 100%. There's a demo on this page if you go "Advanced -> Resizing.

Answer 2

Try:

jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height'));

In the jQGrid callback function loadComplete. #bigset is the id for the table I used. This worked perfectly for me.

Answer 3

I have faced the similar problem and none of the solutions worked perfectly for me. Some work but then there is no scrollbar.

So here is what I have done:

jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));

This code has to be placed in the loadComplete handler and then it works fine. The first parameter of the Math.min is the desired height when there is enough data to fill in the list. NOTE that this same value has to be set as height for the grid. This script choses the minimum of the actual height and the desired height of the grid. So if there are not enough rows the grid height is shrinked, otherwise we always have the same height!