StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are some cases, where jqGrid calculate the width a little incorrect. Mostly I have problems with grid width, but in some cases on IE6 also with the height. So I have to write a small function to fix the problem.</p> <pre><code>var fixGridWidth = function (grid) { var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; var mainWidth = jQuery('#main').width(); var gridScrollWidth = grid[0].scrollWidth; var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode); var scrollWidth = gridScrollWidth; if (htable.length > 0) { var hdivScrollWidth = htable[0].scrollWidth; if ((gridScrollWidth < hdivScrollWidth)) scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth) } if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) { var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth, mainWidth) // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth if (newGridWidth != gviewScrollWidth) grid.jqGrid("setGridWidth", newGridWidth); } }; var fixGridHeight = function (grid) { var gviewNode = grid[0].parentNode.parentNode.parentNode; //var gview = grid.parent().parent().parent(); //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv"); var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode); if (bdiv.length) { var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight; var height = grid.height(); if (delta !== 0 && height && (height-delta>0)) { grid.setGridHeight(height-delta); } } }; var fixGridSize = function (grid) { this.fixGridWidth(grid); this.fixGridHeight(grid); }; </code></pre> <p>In this code <code>"main"</code> is the id of parent div inside of which the grid will be created. In the code I test (<code>scrollWidth > mainWidth</code>) whether the width of <code>"main"</code> allow increasing of jqGrid width.</p> <p>Correct place to call this function is inside of <code>loadComplete</code>:</p> <pre><code>loadComplete: function() { var gr = jQuery('#list'); fixGridSize(gr); } </code></pre> <p>and inside of <code>"done"</code>, if you use <code>'columnChooser'</code> if use use <code>Query('#list').jqGrid('columnChooser');</code></p> <p>(in this example I use also <code>'gridResize'</code>.)</p>

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