2

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.

leora
  • 188,729
  • 360
  • 878
  • 1,366

1 Answers1

7

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:

enter image description here

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

enter image description here

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:

enter image description here

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks for the response . . do you know if a 4.3.2 release will be coming out ? – leora Dec 23 '11 at 22:18
  • @leora: It's not depend on me. :-) You should ask the question Tony at [the trirand forum](http://www.trirand.com/blog/?page_id=393/). – Oleg Dec 23 '11 at 22:23
  • @leora: Do you tried my solution? Do you have some other problems with the frozen columns or the problem is solved? – Oleg Dec 27 '11 at 14:01
  • I am still having one issue but i think its unrelated. I overwrote some of the css to support word wrap in jqgrid and the frozen columns don't line up. I see others raising this in the forum here: http://www.trirand.com/blog/?p=883#comments. If you look at the comment on Dec 22 by Mark, i think this is the same issue – leora Dec 27 '11 at 14:26
  • @leora: I can imagine that it could be some problems with word or character wrapping. It can be that one should fix not only the position, but also the height of the frozen dives. You should post the demo which reproduce the problem. At least you should describes exactly where you use wrapping (in cells, in column headers, ...) and how (with which CSS changes exactly you do this or with which code) – Oleg Dec 27 '11 at 15:02
  • agree . . do you want me to post my css changes to another new question (just focusing on this issue) - (or in a comment inside of this question) ? – leora Dec 27 '11 at 15:07
  • @leora: Yes, probably new question can be better. I suppose that the solving of the problem will be relatively simple extension of the `fixPositionsOfFrozenDivs` from my current answer, but one can solve only the problem which one can reproduce. :-) – Oleg Dec 27 '11 at 15:13
  • i have posted a new question about getting frozen cols to work with word wrap here: http://stackoverflow.com/questions/8686616/how-can-i-get-jqgrid-frozen-columns-to-work-with-word-wrap-on – leora Dec 31 '11 at 06:02
  • @leora: Could you explained why you use bounty? I find that you be not fair in awarding the bounty. You start bounty, but not award it even for absolutely correct answers. I know that awarding the bounty is your right, but my right is to write or not write answers on questions which I read. So you should wait for the answers from other people on your questions but not from me. – Oleg Dec 31 '11 at 08:08