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.

Zuzana

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.

Lubricity

Is this new feature in 3.6? How to set maximum height? I wouldn't want the grid to fill the entire screen either. – Zuzana

No, it's much older than 3.6. Maximum height isn't supported AFAIK (other than limiting row count); you'll have to work harder for that or put it in something scrollable. – Lubricity

I can't limit the row count since it is not within my control. However I am accepting this answer since it partially fulfills my need and there is no other answer. – Zuzana

@Craig- Thanks - I was almost trying to rebuild it. – Torero

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.

Nebulose

Works great. One potential issue with the accepted answer is that 100% will sometimes add a fair bit of space at the bottom of the element (I assume because something else is effecting the height). After not being able to find out where that height was coming from, this solution worked for me. – Chromatograph

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!

Verduzco

Answer 4

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

Divulsion

Answer 5

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 :) )

Rika

Answer 6

Here is a generic method I came up with based on Amit's solution. It will allow you to specify the max number of rows to display. It uses the grid's header height to calculate max height. It may need tweeking if your rows aren't the same height as your header. Hope it helps.

function resizeGridHeight(grid, maxRows) {
    // this method will resize a grid's height based on the number of elements in the grid
    // example method call: resizeGridHeight($("#XYZ"), 5)
    // where XYZ is the id of the grid's table element
    // DISCLAIMER: this method is not heavily tested, YMMV

    // gview_XYZ is a div that contains the header and body divs
    var gviewSelector = '#gview_' + grid.attr('id');
    var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv';
    var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';

    // use the header's height as a base for calculating the max height of the body
    var headerHeight = parseInt($(headerSelector).css('height'));
    var maxHeight = maxRows * headerHeight;

    // grid.css('height') is updated by jqGrid whenever rows are added to the grid
    var gridHeight = parseInt(grid.css('height'));
    var height = Math.min(gridHeight, maxHeight);
    $(bodySelector).css('height', height);
}

Lefty

Answer 7

Add below code inside loadComplete function

var ids = grid.jqGrid('getDataIDs');
//setting height for grid to display 15 rows at a time
if (ids.length > 15) {
    var rowHeight = $("#"+gridId +" tr").eq(1).height();
    $("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true);
} else {
//if rows are less than 15 then setting height to 100%
    $("#"+gridId).jqGrid('setGridHeight', "100%", true);
}

Thurmanthurmann