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

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);
}

Answer 3

try :

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

in jQGrid callback function, loadComplete.

where bigset is grid table id I used.

This worked perfectly for me.

Answer 4

Though the height 100% worked fine in the demo, it didn't work for me. The grid became much bigger, maybe it tried to occupy the parent div's height. Amit's solution worked perfectly for me, thanks! (I'm new as a contributor here, and so need a higher 'reputation' to mark any votes up :) )