jquery - why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?

Question

i can't get frozen columns to work with jqgrid (4.3.0). the only thing i can think of is that i have some specific things that are not out of the box:

1. I am using filtered row at the top.
2. I am showing all buttons at the top of the grid using (cloneToTop: true)

3. I have the following code that i use to show filter status at the top of jqggrid. (using filtertoolbar)

   loadComplete: function () {
   
       var postData = jQuery(gridSelector).getGridParam("postData");
       var newCapture = "";
       if (postData._search === true && typeof postData.filters !== "undefined") {
           var filters = jQuery.parseJSON(postData.filters);
           newCapture = "Filter: [";
           var rules = filters.rules;
           for (var i = 0; i < rules.length; i++) {
               var rule = rules[i];
               var op = rule.op;  // the code name of the operation
               if (jQuery.fn.searchFilter && jQuery.fn.searchFilter.defaults &&
               jQuery.fn.searchFilter.defaults.operators) {
                   // find op description 
                   var operators = jQuery.fn.searchFilter.defaults.operators;
                   for (var j = 0; j < operators.length; j++) {
                       if (operators[j].op === rule.op) {
                           op = operators[j].text;
                           //op = $.jgrid.search.odata[j];
                           break;
                       }
                   }
               }
               newCapture += rule.field + " " + op + " '" + rule.data + "'";
               if (i + 1 !== rules.length)
                   newCapture += ", ";
           }
           newCapture += "]";
       }
       jQuery(gridSelector).setCaption(newCapture);
   

can anyone think of anything that would prevent frozen columns from working under these circumstances.

Answer 1

I analysed your problem and created the demo which demonstrate how the problem can be solved. The demo produces the grid with the frozen first column:

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:

One can sees the first problem especially clear in case of datatype: 'local' where the data of the grid will be filled during the grid initialization. See the corresponding demo in which I just called the method setFrozenColumns. One can see the problem on the picture

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 the next demo it will be enough to call the method _complete directly after calling of setFrozenColumns to fix the problem:

$grid.jqGrid('setFrozenColumns');
$grid[0].p._complete.call($grid[0]);

where $grid is defined as var $grid = $('#list');.

The next problem is that _complete method calculate the position of the fixed part of the column header (saved in $grid[0].grid.fhDiv) and the fixed part of the grid body (saved in $grid[0].grid.fbDiv) only using the height of the standard grid's caption (grid title). So if your use setCaption to change the caption you can have "frozen" dives in the wrong position. The call of _complete method after the setCaption will not fix the problem and one still have the results like on the demo:

To fix the problem I wrote very simple function fixPositionsOfFrozenDivs

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());
        }
    };

which fix the position of the frozen dives.

At the end I changed a little the implementation of loadComplete to the following:

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);
}

where the array arOps are defined as

var arOps = ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en",
             "cn", "nc"];

As the result one will have the demo 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.