Question

Is there any way to resize a jqGrid when the browser window is resized? I have tried the method described here but that technique does not work in IE7.

Answer 1

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>