Freezing Columns in JQGrid

Question

Is there a way to get jqGrid to freeze one or more left-most columns and have the balance of the columns scroll left-and-right?

I did Google up at least one person who claims to have done it here: http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/

... but the sample code is gone. (Ironically and painfully, the screencast of it working is still up, mocking me.)

It looks like some here have gotten it working too, but didn't include code.

Has anyone gotten frozen columns with scrolling working in a jqGrid with that plugin or another similar plugin? Anyone have that code working & handy?

I would have thought you'd include that fellow's code and it would automagically produce the pushpins that you can see in his screencast, and if it didn't you'd make the magic happen with...

$(document).ready(function() {
    //$("#tblImz").jqGrid().freezingSetup(); // initially tried without this line; same error (reporting different function, natch)
    $("#tblImz").jqGrid().freezeColumn(2);
});

... but that gives me...

Microsoft JScript runtime error: Object doesn't support property or method 'freezeColumn'

or

Microsoft JScript runtime error: Object doesn't support property or method 'freezingSetup'

Just for fun, here's the cleaned up code that I think is nearly right, taken from the paste from the post above. I think this accurately relays what the author had [unintentionally mangled up] in his trirand.com forum post, with the two edits from here suggested by linoj. Okay, code dump...

(function ($) {    
/**    
* jqGrid extension    
* Tim Heckel timheckel@gmail.com    *
* from here: http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/
* Dual licensed under the MIT and GPL licenses:    
* http://www.opensource.org/licenses/mit-license.php    
* http://www.gnu.org/licenses/gpl-2.0.html    *
*/    
$.jgrid.extend({
    //overrides existing        
    getCellIndex: function (cell) {
        var c = jQuery(cell);

        if (c.is('tr')) { 
            return -1; 
        }
        var index = -1;

        if (c.parent().hasClass("ui-jqgrid-frozenColumnHeader")) {
            index = parseInt(c.attr("rel"));
        } else {
            c = (!c.is('td') && !c.is('th') ? c.closest("td,th") : c)[0];
            if (jQuery.browser.msie) {
                index = jQuery.inArray(c, c.parentNode.cells);
            } else {
                index = c.cellIndex;
            }
        }
        return index;        
    }    
});    

$.jgrid.extend({
    removeFreezeIcons: function () {
        jQuery(".toggleFrozenColumn").remove();
    },
    freezingSetup: function () {
        // [1]
        return this.each(function () {
            var grid = this;
            var colIndex = -1;
            jQuery(".ui-th-column").each(function () {
                colIndex++;
                if (colIndex <= grid.p.colModel.length - 1) {
                    if (jQuery(this).is(":visible") && grid.p.colModel[colIndex].freezing) {
                        if (jQuery(".toggleFrozenColumn[rel=" + colIndex + "]").length === 0) {
                            jQuery(this).children(".ui-jqgrid-sortable").prepend("<img href='javascript:' class='toggleFrozenColumn' rel='" + colIndex + "' src='" + grid.p.imageDir + "/pinup.png'/>");
                        }
                    }
                } else {
                    return;
                }
            });


            jQuery(".toggleFrozenColumn").unbind();
            jQuery(".toggleFrozenColumn").click(function (e) {
                e.stopPropagation();
                var img = this;
                jQuery.extend(grid.p, { currentFrozenIndex: parseInt(jQuery(this).attr("rel")) });
                process(img);
            });


            function process(img) {
                jQuery(".toggleFrozenColumn").hide();
                jQuery(img).show();
                var _ci = parseInt(jQuery(img).attr("rel"));
                var _name = grid.p.colModel[parseInt(jQuery(img).attr("rel"))].name;
                if (jQuery(img).attr("src").indexOf("pindown") > -1) {
                    jQuery("#" + grid.p.id + "_" + _name).find('.toggleFrozenColumn').attr("src", grid.p.imageDir + "/pinup.png");
                    for (ci = parseInt(jQuery(img).attr("rel")); ci > -1; ci--) {
                        jQuery("#" + grid.p.id).jqGrid("unfreezeColumn", ci);
                    }
                    jQuery(".toggleFrozenColumn").show();
                } else {
                    jQuery(img).attr("src", grid.p.imageDir + "/pindown.png");
                    for (ci = parseInt(jQuery(img).attr("rel")); ci > -1; ci--) {
                        jQuery("#" + grid.p.id).jqGrid("freezeColumn", ci);
                    }
                }
            }

            if (grid.p.currentFrozenIndex !== undefined) {
                var img = jQuery(".toggleFrozenColumn[rel=" + grid.p.currentFrozenIndex + "]");

                //unfreeze all
                process(img[img.length - 1]);

                //freeze all
                process(img[0]);
            }
        });        
        // [1]
        //
    },        

    unfreezeColumn: function (colIndex) {
        return this.each(function () {
        var t = this;
        var _name = t.p.colModel[colIndex].name;
        if (jQuery("#frozenColumn_" + _name).length > 0) {
        jQuery("#frozenColumnHeader_" + _name).remove();
        jQuery("#frozenColumn_" + _name).remove();
        }
        });        
    },        

    freezeColumn: function (colIndex) {
        jQuery(".ui-jqgrid-bdiv").scroll(function () {
            jQuery(".ui-jqgrid-frozenColumn").scrollTop(jQuery(this).scrollTop());
        });

        return this.each(function () {
            var t = this;
            var _name = t.p.colModel[colIndex].name;
            var _allow = t.p.colModel[colIndex].freezing;
            if (jQuery("#frozenColumn_" + _name).length === 0 && _allow) {
                var _id = t.p.id;
                var c = jQuery("#" + _id + "_" + _name);
                if (c.is(":visible")) {
                    var th = c.clone(true).css("height", c.height() + "px").css("vertical-align", "middle"); //.css("background-color", t.p.frozenColumnHorizontalBorderColor); //.css("font-weight", c.css("font-weight"));
                    var ct = "";



                    var cell = jQuery('td[aria-describedby=' + _id + '_' + _name + ']');
                    var dimen = { height: 0, top: 0, width: 0, top: 0, left: 0 };
                    dimen.height = jQuery(".ui-jqgrid-bdiv").outerHeight(true) - 16;


                    jQuery.each(cell, function () {
                        var cls = new Array();
                        var classList = $(this).attr('class').split(/s+/);
                        jQuery.each(classList, function (index, item) {
                        cls.push(item);
                        });

                        ct += "<div class='ui-jqgrid-frozenColumnCell " + cls.join(' ') + "' style='border-right:1px solid " + t.p.frozenColumnVerticalBorderColor + ";border-left:1px solid transparent;border-bottom:1px solid " + t.p.frozenColumnHorizontalBorderColor + ";background-color:#FFF;padding-top:1px;height:" + (jQuery(this).height() - 1) + "px;'>" + jQuery(this).html() + "</div>";
                        // +5 is from here:
                        // http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/#p21071
                        if (dimen.width === 0) dimen.width = jQuery(this).width() + 1 + 5;
                        if (dimen.top === 0) {
                            dimen.top = jQuery(".ui-jqgrid-titlebar").outerHeight(true) + c.outerHeight(true) + 1;
                            dimen.left = jQuery(this).position().left - 1;
                        }
                    });

                    var titleBarHeight = jQuery(".ui-jqgrid-titlebar").outerHeight(true);

                    // "dimen.width" in first call below replaces c.width() in the original, from same link.
                    // http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/#p21071
                    jQuery(".ui-jqgrid-view").append("<div class='ui-jqgrid-frozenColumnHeader' id='frozenColumnHeader_" + _name 
                        + "' style='height:" + c.height() 
                        + "px;width:" + c.width() 
                        + "px;top:" + titleBarHeight 
                        + "px;left:" + dimen.left 
                        + "px;position:absolute;overflow:hidden;border-right:1px solid " + t.p.frozenColumnVerticalBorderColor + "'></div>");
                    jQuery(".ui-jqgrid-view").append("<div class='ui-jqgrid-frozenColumn' id='frozenColumn_" + _name 
                        + "' style=';overflow:hidden;position:absolute;height:" + dimen.height 
                        + "px;width:" + dimen.width 
                        + "px;top:" + dimen.top 
                        + "px;left:" + dimen.left + "px;'>" 
                        + ct 
                    + "</div>");

                    c = (!c.is('td') && !c.is('th') ? c.closest("td,th") : c)[0];

                    if (jQuery.browser.msie) {
                        th.attr("rel", jQuery.inArray(jQuery("#" + _id + "_" + _name), c.parentNode.cells));
                    } else {
                        th.attr("rel", c.cellIndex);
                    }

                    jQuery("#frozenColumnHeader_" + _name).append(th);
                }
            }
        });        

    }
});
})(jQuery);

Any ideas?

Answer 1

The frozen columns are implemented now in jqGrid 4.3. Look at the official demo, choose "Frozen Cols.Group Header(new)" at the bottom of the tree on the left side and then choose the demo "Frozen column" or "Frozen column with group header".