Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
New freeze column plugin
12/11/2010
18:31
heck0045
New Member
Forum Posts: 2
Member Since:
22/10/2010
Offline

Hi -- I have made a simple grid.freezeColumns.js plugin that you can use. There is a spacing bug on the frozen columns, but otherwise, it's working pretty well. It does not work with grouping yet, however.

Video demo here:

http://screencast.com/t/gPdOVPQlRc

Here is the plugin source:

; (function (jQuery) {
    /**
    * jqGrid extension
    * Tim Heckel timheckel@gmail.com
    * 
    * 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
    **/
    jQuery.extend(jQuery.jgrid, {
        //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;
        }
    });
    jQuery.jgrid.extend({
        removeFreezeIcons: function () {
            jQuery(".toggleFrozenColumn").remove();
        },
        freezingSetup: function () {
            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]);
                }
            });
        },
        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>";
                            if (dimen.width === 0) dimen.width = jQuery(this).width() + 1;
                            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);

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

02/12/2010
07:06
linoj
Member
Forum Posts: 18
Member Since:
06/12/2009
Offline

Hi, thanks for this! I had a critical requirement to freeze columns, especially the first one (a timestamp), on my very wide table. Could use a frozen:true option in the colModel, but I did this and it works fine:

          $("#data_table_timestamp img.toggleFrozenColumn").click();

I had to hack your code to fix the offset problem

line 124:                             if (dimen.width === 0) dimen.width = jQuery(this).width() + 1 +5; //JSL added +5

and in line 133, replaced c.width() with dimen.width

Also, fyi, it doesnt like the toppager:true option

regards,

linoj

17/01/2011
04:22
mnaoumov
Member
Forum Posts: 6
Member Since:
17/01/2011
Offline

heck0045, linoj

I cannot download demo from 4shared.com (file is not more available). Could you please re-upload the files?

I would like to add frozen columns to my jqGrid. I see that author is planning to add this feature but don't see any certain dates :)

14/02/2011
10:41
ivanchain
Member
Forum Posts: 55
Member Since:
11/03/2010
Offline

this code can't work. 

09/03/2011
04:35
mozartvn
Member
Forum Posts: 5
Member Since:
01/03/2011
Offline

plz re-upload demo file !

thanks in advance :)

12/04/2011
06:45
jqgridnovice
New Member
Forum Posts: 1
Member Since:
12/04/2011
Offline

Hi, I am fairly good at javascript and jqgrid extensions are new to me.

I have copy pasted your code into a file

I have a need to freeze a couple of columns at the start.

But I am not sure how to pass that info to this plugin, basically how to get started and how to trigger the freezing to occur other than importing this library.

26/04/2011
17:55
hooperau
New Member
Forum Posts: 1
Member Since:
26/04/2011
Offline

Is anybody have this source codes and demo page????

03/06/2011
10:05
kisor.biswal
New Member
Forum Posts: 1
Member Since:
03/06/2011
Offline

linoj said:

Hi, thanks for this! I had a critical requirement to freeze columns, especially the first one (a timestamp), on my very wide table. Could use a frozen:true option in the colModel, but I did this and it works fine:

          $("#data_table_timestamp img.toggleFrozenColumn").click();

I had to hack your code to fix the offset problem

line 124:                             if (dimen.width === 0) dimen.width = jQuery(this).width() + 1 +5; //JSL added +5

and in line 133, replaced c.width() with dimen.width

Also, fyi, it doesnt like the toppager:true option

regards,

linoj


Hi Linoj,

Can you plese post here if you have a working code? Or else please send thru email: kisor.biswal at gmaill dot com

Thanks,
Kisor

04/11/2011
15:02
foofiequaf
New Member
Forum Posts: 2
Member Since:
04/11/2011
Offline

Does anyone have an example of how to actually USE this ?  I.E. How do I indicate that a column or a set of columns should be frozen ?

14/01/2012
12:20
mafirstlove
New Member
Forum Posts: 2
Member Since:
14/01/2012
Offline
10

@foofiequaf, you can use setfrozencolumn metod to frezze columns....

i hope below example will help you

 jQuery("#UsersGrid").jqGrid({
                url: 'jqGridHandler.ashx',
                datatype: 'json',
                height: 250,
                colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID'],
                colModel: [
                        { name: 'UserID', index: 'UserID', width: 100, sortable: true, frozen: true },
                        { name: 'UserName', width: 100, sortable: true, frozen: true },
                        { name: 'FirstName', width: 100, sortable: true },
                        { name: 'MiddleName', width: 100, sortable: true },
                        { name: 'LastName', width: 100, sortable: true },
                        { name: 'EmailID', width: 150, sortable: true }
                    ],
                rowNum: 100,
                rowList: [200, 400, 600],
                pager: '#UsersGridPager',
                sortname: 'UserID',
                viewrecords: true,
                shrinkToFit: false,
                width: 300,
                sortorder: 'asc',
                
                caption: 'JSON Example'
            });

            jQuery("#UsersGrid").jqGrid('navGrid', '#UsersGridPager');
            jQuery("#UsersGrid").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders: [{ startColumnName: 'UserID', numberOfColumns: 2, titleText: 'Client Details' }, { startColumnName: 'FirstName', numberOfColumns: 3, titleText: 'Client Name'}] });
            jQuery("#UsersGrid").jqGrid('setFrozenColumns');

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online: shivakrishna1102
50 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1233

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11315

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10523

Posts: 31109

Newest Members: shivakrishna1102, jqGridForStruts, shrat, wheeliea, dontbannedme, duyquang

Moderators: tony: 7679, Rumen[Trirand]: 81

Administrators: admin: 61

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information