StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I analysed your problem and created <a href="http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns.htm" rel="noreferrer">the demo</a> which demonstrate how the problem can be solved. The demo produces the grid with the frozen first column:</p> <p><img src="https://i.stack.imgur.com/JnvaI.png" alt="enter image description here"></p> <p>I found some bugs in the current (version 4.3.1) implementation of frozen columns in jqGrid and will post later my suggestions how to fix there to trirand. The problems are the following:</p> <p>One can sees the first problem especially clear in case of <code>datatype: 'local'</code> where the data of the grid will be filled during the grid initialization. See <a href="http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns0.htm" rel="noreferrer">the corresponding demo</a> in which I just called the method <code>setFrozenColumns</code>. One can see the problem on the picture</p> <p><img src="https://i.stack.imgur.com/wSzYE.png" alt="enter image description here"></p> <p>On can see that only the column header will be frozen, but the grid body inclusive the column with row numbers will be scrolled. How one can see from <a href="http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns1.htm" rel="noreferrer">the next demo</a> it will be enough to call the method <code>_complete</code> directly after calling of <code>setFrozenColumns</code> to fix the problem:</p> <pre><code>$grid.jqGrid('setFrozenColumns'); $grid[0].p._complete.call($grid[0]); </code></pre> <p>where <code>$grid</code> is defined as <code>var $grid = $('#list');</code>.</p> <p>The next problem is that <code>_complete</code> method calculate the position of the fixed part of the column header (saved in <code>$grid[0].grid.fhDiv</code>) and the fixed part of the grid body (saved in <code>$grid[0].grid.fbDiv</code>) only using the height of the standard grid's caption (grid title). So if your use <code>setCaption</code> to change the caption you can have "frozen" dives in the wrong position. The call of <code>_complete</code> method after the <code>setCaption</code> will not fix the problem and one still have the results like on <a href="http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns2.htm" rel="noreferrer">the demo</a>:</p> <p><img src="https://i.stack.imgur.com/BqHOt.png" alt="enter image description here"></p> <p>To fix the problem I wrote very simple function <code>fixPositionsOfFrozenDivs</code></p> <pre><code>var fixPositionsOfFrozenDivs = function () { if (typeof this.grid.fbDiv !== "undefined") { $(this.grid.fbDiv).css($(this.grid.bDiv).position()); } if (typeof this.grid.fhDiv !== "undefined") { $(this.grid.fhDiv).css($(this.grid.hDiv).position()); } }; </code></pre> <p>which fix the position of the frozen dives.</p> <p>At the end I changed a little the implementation of <code>loadComplete</code> to the following:</p> <pre><code>loadComplete: function () { var $this = $(this), newCapture = "", filters, rules, rule, op, i, iOp, postData = $this.jqGrid("getGridParam", "postData"), isFiltering = $this.jqGrid("getGridParam", "search"); if (isFiltering === true && typeof postData.filters !== "undefined") { filters = $.parseJSON(postData.filters); newCapture = "Filter: ["; rules = filters.rules; for (i = 0; i < rules.length; i++) { rule = rules[i]; op = rule.op; // the code name of the operation iOp = $.inArray(op, arOps); if (iOp >= 0 && typeof $.jgrid.search.odata[iOp] !== "undefined") { op = $.jgrid.search.odata[iOp]; } newCapture += rule.field + " " + op + " '" + rule.data + "'"; if (i + 1 !== rules.length) { newCapture += ", "; } } newCapture += "]"; } $this.jqGrid("setCaption", newCapture); fixPositionsOfFrozenDivs.call(this); } </code></pre> <p>where the array <code>arOps</code> are defined as</p> <pre><code>var arOps = ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en", "cn", "nc"]; </code></pre> <p>As the result one will have <a href="http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns.htm" rel="noreferrer">the demo</a> which I referenced at the beginning of my answer. If you would type some filter in the searching filter toolbar or in the advanced searching dialog the caption of the grid will be changed (like in your original example), but all frozen dives will have the correct position.</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