jqGrid with automatic height; but has a max height

Question

Is there any way to get jqGrid to adjust its height automatically to the number of rows; but when a certain height is reached that its height cannot increase anymore and that the vertical scrollbar apprears?

Thanks D

Answer 1

I would recommend you to set "max-height" property on the bdiv of jqGrid and use height:'100%' or height:'auto':

$("#list").parents('div.ui-jqgrid-bdiv').css("max-height","300px");

The "max-height" property will be not used by IE6, but more recent web browsers will use it.

UPDATED: Free jqGrid introduce in version 4.10.0 new property: maxHeight which do exactly the same as above. Thus one can just use maxHeight: 300 instead of manual setting of max-height of the parent div.ui-jqgrid-bdiv.

Answer 2

Our UI person solved the problem (expand the list up to 300px, if there are more than 10 attachments, show a vertical scrollbar) with css

#gview_list_Attachments .ui-jqgrid-bdiv{
    max-height: 300px;
    overflow-y: visible;
}

300px happens to be height of 10 items in our case. Of course using jquery you can determine the height of 1 item and multiply by 10. But this solution was quick, simple and solved our problem.

Answer 3

Add this:

var height = $(window).height();
$('.ui-jqgrid-bdiv').height(height);

after loading jqgrid on your desired page, this worked for me.

Answer 4

try this

jQuery("#yourid").jqGrid({  
    ........
    height:'auto'
}); 

Answer 5

Try this

 $("#list1").parents(".ui-jqgrid-bdiv").css('height', jQuery("#list1").css('height'));

This code will adjust height of grid according to the Number of rows in a grid

Answer 6

Try these methods

1.define a height inside the grid

                        $("#griname").jqGrid(
                                {
                                    rowNum : 1000,
                                    viewrecords : true,
                                    gridview : true,
                                    autoencode : true,
                                    loadonce : true,
                                    width: "100%",
                                    height: 300,
                            });

2.this function can be used to keep the height fixed to a pre-defined value.

$(window).resize(function() {

if (typeof($gridname) !== 'undefined' && $("#gridname").length > 0) {
    $discrepanciesResultGrid.setGridHeight(
        $(window).height() - $("#gridname").position().top - 210
    );
    $gridname.setGridWidth($("body").width() - $("#anothercomponenetname").width() -    50);
    }