Resize jqGrid based on number of rows?

user_193634 0
Viewed 26880

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.

jqgrid css jquery javascript
7 Answers
Craig_Stuntz_77140

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.

user_2936240

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!

user_3845980

call the below function from afterInsertRow and when deleting a row:

function adjustHeight(grid, maxHeight){
    var height = grid.height();
    if (height>maxHeight)height = maxHeight;
    grid.setGridHeight(height);
}
user_1844820
Related