StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As a follow-up:</p> <p>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:</p> <pre><code>jQuery("#targetGrid").setGridWidth(width); </code></pre> <p>To do the actual resizing, a function implementing the following logic is bound to the window's resize event:</p> <ul> <li><p>Calculate the width of the grid using its parent's clientWidth and (if that is not available) its offsetWidth attribute. </p></li> <li><p>Perform a sanity check to make sure width has changed more than x pixels (to work around some application-specific problems)</p></li> <li><p>Finally, use setGridWidth() to change the grid's width</p></li> </ul> <p>Here is example code to handle resizing:</p> <pre><code>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'); </code></pre> <p>And example markup:</p> <pre><code><div id="grid_container"> <table id="grid"></table> <div id="grid_pgr"></div> </div> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload