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>