Resize jqGrid when browser is resized? Resize jqGrid when browser is resized? javascript javascript

Resize jqGrid when browser is resized?


Been using this in production for some time now without any complaints (May take some tweaking to look right on your site.. for instance, subtracting the width of a sidebar, etc)

$(window).bind('resize', function() {    $("#jqgrid").setGridWidth($(window).width());}).trigger('resize');


As a follow-up:

The previous code shown in this post was eventually abandoned because it was unreliable. I am now using the following API function to resize the grid, as recommended by the jqGrid documentation:

jQuery("#targetGrid").setGridWidth(width);

To do the actual resizing, a function implementing the following logic is bound to the window's resize event:

  • Calculate the width of the grid using its parent's clientWidth and (if that is not available) its offsetWidth attribute.

  • Perform a sanity check to make sure width has changed more than x pixels (to work around some application-specific problems)

  • Finally, use setGridWidth() to change the grid's width

Here is example code to handle resizing:

jQuery(window).bind('resize', function() {    // Get width of parent container    var width = jQuery(targetContainer).attr('clientWidth');    if (width == null || width < 1){        // For IE, revert to offsetWidth if necessary        width = jQuery(targetContainer).attr('offsetWidth');    }    width = width - 2; // Fudge factor to prevent horizontal scrollbars    if (width > 0 &&        // Only resize if new width exceeds a minimal threshold        // Fixes IE issue with in-place resizing when mousing-over frame bars        Math.abs(width - jQuery(targetGrid).width()) > 5)    {        jQuery(targetGrid).setGridWidth(width);    }}).trigger('resize');

And example markup:

<div id="grid_container">    <table id="grid"></table>    <div id="grid_pgr"></div></div>


Auto resize:

For jQgrid 3.5+

        if (grid = $('.ui-jqgrid-btable:visible')) {            grid.each(function(index) {                gridId = $(this).attr('id');                gridParentWidth = $('#gbox_' + gridId).parent().width();                $('#' + gridId).setGridWidth(gridParentWidth);            });        }

For jQgrid 3.4.x:

       if (typeof $('table.scroll').setGridWidth == 'function') {            $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)            if (gridObj) {            } else {                $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) {                    grid = $(this).children('table.scroll');                    gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;                    grid.setGridWidth(gridParentWidth, true);                });            }        }