Question

jqgrid header

may contain extra toolbar defined using

toolbar: [true, "top"], 

contains navigation toolbar defined using

$grid.jqGrid('navButtonAdd', '#grid_toppager', {...

and contains search toolbar.

To resize grid to end of screen I’m looking for a way to calculate this header height
in window resize.
I tried code below but this sets grid height too big.
How to calculate grid header height ?

$(window).resize(function () { 
  var extraToolbarHeight = $('#t_' + $.jgrid.jqID($grid[0].id)).outerHeight(true),
       caption_height=$("div#gview_"+$grid[0].id+" > div.ui-jqgrid-hdiv").outerHeight(true);
  $('#grid1container').height($(window).height() - 18);
  $grid.jqGrid('setGridHeight', $('#grid1container').height()-caption_height
        -extraToolbarHeight );
     });


    <div id="grid1container" style="width: 100%; height: 100%">
        <table id="grid">
        </table>
    </div>

Answer 1

Here is a function I wrote to resize my jqGrids to fit their container element. See if it fits your needs.

// resize a grid to fill the space of its container
// this will throw an error if you pass in a non-existant
// Parameters:
//  grid - a reference to your grid
//  container - a reference to your container, or the selector
// Usage:
// resizeGrid($('#gridXYZ'), '#largeGridDiv')
function resizeGrid(grid, container) {
    if (typeof container == 'string') {
        container = $(container);
    }
    if (container.length > 0) {
        var headerHeight = $($('.ui-jqgrid-hdiv')[0]).height();
        var newHeight = container.height() - headerHeight;
        grid.jqGrid().setGridHeight(newHeight);
        grid.jqGrid().setGridWidth(container.width());
    } else {
        throw ('Non-existant container passed to resizeGrid()');
    }
}


// some other selectors that may help, again grid 
var gviewSelector = '#gview_' + $('#gridXYZ').attr('id');
var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv';
var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';