jQuery Grid Plugin - jqGridForum

17/04/2012
17:47

aleksandarcajic

New Member

Members

Forum Posts: 2

Member Since:
17/04/2012

Offline

1

Hi!

I had issue with Firefox 11 and resizing columns, for a few hours I got a solution for this issue. A part of the core code has to be improved, this is my solution:

dragEnd:function() {
                    this.hDiv.style.cursor =
                        "default";
                    if (this.resizing) {
                        var e = this.resizing.idx,f = this.headers[e].newWidth || this.headers[e].width;
                        f = parseInt(f, 10);
                        this.resizing = false;
                        b("#rs_m" + b.jgrid.jqID(c.id)).css("display", "none");
                        c.colModel[e].width = f;
                        this.headers[e].width = f;
                        this.headers[e].el.style.width = f + "px";
                        this.cols[e].style.width = f + "px";
                        if (this.footers.length > 0)this.footers[e].style.width = f + "px";
                        if (c.forceFit === true) {
                            jQuery('#' + c.id).css("display", "table");
                            var bDivElement = jQuery(this.bDiv);
                            var bDivElementHeight = this.bDiv.clientHeight + "px";
                            bDivElement.css("height",bDivElementHeight);
                            this.cols[e + c.nv].style.height = "0";
                            f = this.headers[e + c.nv].newWidth || this.headers[e + c.nv].width;
                            c.colModel[e + c.nv].width = f;
                            this.headers[e + c.nv].width = f;
                            this.headers[e + c.nv].el.style.width = f + "px";
                            this.cols[e + c.nv].style.width = f + "px";
                            if (this.footers.length > 0)this.footers[e + c.nv].style.width = f + "px";
                            jQuery('#' + c.id).css("display", "none");
                            setTimeout(function() {
                                bDivElement.css("height",c.height);
                                jQuery('#' + c.id).css("display", "table");
                            }, 50);
                        } else {
                            c.tblwidth = this.newWidth || c.tblwidth;
                            b("table:first", this.bDiv).css("width", c.tblwidth + "px");
                            b("table:first", this.hDiv).css("width", c.tblwidth + "px");
                            this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                            if (c.footerrow) {
                                b("table:first", this.sDiv).css("width", c.tblwidth + "px");
                                this.sDiv.scrollLeft = this.bDiv.scrollLeft
                            }
                        }
                        b.isFunction(c.resizeStop) && c.resizeStop.call(this, f, e)
                    }
                    this.curGbox =
                        null;
                    document.onselectstart = function() {
                        return true
                    }
                }

A part of the code whic is improved is inside this case "c.forceFit === true". The table element has to be hidden and shown after resize is finished. Also div element height property can be set to some value in pixels or by default set to "auto", we don't know that, because each time table is hidden/shown code gets current value of height property and set it after table is shown.

If any one has better solution about this issue, please, reply on this topic. Thanx!!!

18/04/2012
12:34

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

Thank anyway for the issue.

Could you please use the source code and make the changes clear so that we can see really the problem.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

18/04/2012
12:50

aleksandarcajic

New Member

Members

Forum Posts: 2

Member Since:
17/04/2012

Offline

3

Hi Tony,

posted code snippet is just a part of the jqgrid source code i will try now to clear out what is changed

Reveal Spoiler

dragEnd:function() {
                    this.hDiv.style.cursor =
                        "default";
                    if (this.resizing) {
                        var e = this.resizing.idx,f = this.headers[e].newWidth || this.headers[e].width;
                        f = parseInt(f, 10);
                        this.resizing = false;
                        b("#rs_m" + b.jgrid.jqID(c.id)).css("display", "none");
                        c.colModel[e].width = f;
                        this.headers[e].width = f;
                        this.headers[e].el.style.width = f + "px";
                        this.cols[e].style.width = f + "px";
                        if (this.footers.length > 0)this.footers[e].style.width = f + "px";
                        if (c.forceFit === true) {

// This line is added, table element gets display property set as table
jQuery('#' + c.id).css("display", "table");

                            // With bDivElement we will try to preserve current height of the grid panel
                            // to be sure that other elements on page are not disturbed
                            var bDivElement = jQuery(this.bDiv);
                            var bDivElementHeight = this.bDiv.clientHeight + "px";
                            bDivElement.css("height",bDivElementHeight);

                            this.cols[e + c.nv].style.height = "0";
                            f = this.headers[e + c.nv].newWidth || this.headers[e + c.nv].width;
                            c.colModel[e + c.nv].width = f;
                            this.headers[e + c.nv].width = f;
                            this.headers[e + c.nv].el.style.width = f + "px";
                            this.cols[e + c.nv].style.width = f + "px";
                            if (this.footers.length > 0)this.footers[e + c.nv].style.width = f + "px";

// Lines below are also added, after this.cols got width property set
// table element will be hidden and in few miliseconds table will be shown
// with correct resized columns

                            jQuery('#' + c.id).css("display", "none");
                            setTimeout(function() {
                                // The bDivElement height property set
                                bDivElement.css("height",c.height);
                                jQuery('#' + c.id).css("display", "table");
                            }, 50);

                        } else {
                            c.tblwidth = this.newWidth || c.tblwidth;
                            b("table:first", this.bDiv).css("width", c.tblwidth + "px");
                            b("table:first", this.hDiv).css("width", c.tblwidth + "px");
                            this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                            if (c.footerrow) {
                                b("table:first", this.sDiv).css("width", c.tblwidth + "px");
                                this.sDiv.scrollLeft = this.bDiv.scrollLeft
                            }
                        }
                        b.isFunction(c.resizeStop) && c.resizeStop.call(this, f, e)
                    }
                    this.curGbox =
                        null;
                    document.onselectstart = function() {
                        return true
                    }
                }

Comment lines are added, in general, Firefox 11 doesn't resizing columns if "forceFit" property is set to true. It will resize only header not cells below.

Best regards