jQuery Grid Plugin - jqGridForum

Topic RSS

Column reordering - header display problem

06/05/2010
16:25

Klaus

Member

Members

Forum Posts: 68

Member Since:
18/11/2009

Offline

1) When I scroll in a grid horizontally the table headers are moved slower than the content. When I stop scrolling they are aligned correct. (maybe to be improved - slower timeout)

2) When I reorder columns via drag&drop in a bigger grid already scrolled to the right (horiz.), the column headers are wrong aligned until I to the left edge and back again.

I'm using jqGrid 3.6.5

Kind regards,
Klaus.

07/05/2010
11:27

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Klaus,

Thanks. The only way to correct this is to send me a link to the problem

There was such post before some time here, but I was unable to reproduce the bug.

Regards

Tony

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.

10/05/2010
14:16

Klaus

Member

Members

Forum Posts: 68

Member Since:
18/11/2009

Offline

Hello Tony!

I've put up a demo page where I can easily reproduce this bug:

http://jsbin.com/uxele3/3

… scroll to "Column 10″ and move it with the mouse 1 column left, than the name column (which is the first column) is displayed as first (which should not be, because it is out of visible range) and the "Column 10 as second aligned to the Name column and not to the content.

When you check this in the column chooser dialog, the moved column (Column 10) was really moved to 2nd place and not only 1 column left as desired.

I hope this demo page will help you find and fix that bug.

Kind regards,
Klaus.

p.s.: I tested with Firefox 3.6.3.
p.p.s: the used jqGrid version is that from your demo page (I've directly linked the CSS and JS files from there)

11/05/2010
14:21

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Klaus,

Thank you very much for the link provided. It tell me more.

Short - I do not think that this is a jqGrid, but rather sortable one.

The script works fine in IE, Safari, Chrome.

The problem: When we do sorting the sorted element becomes a position absolute and the absolute positioned element which parent has a CSS property overflow-x:hidden causes FireFox to scroll to left position = 0;

The test case which demostates this is:

Edit the grid css and change the following

.ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0em;padding: 0em; overflow-x: hidden; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; border-right : 0px none !important;}

.ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0em;padding: 0em; overflow-x: auto; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; border-right : 0px none !important;}

Clear the cashe and try. Of course grid will not look good, but this demostaates the problem.

In order to resolve the issue (I'm not sure that I will change the method sorrtableColumns)

go back to the original css and add the following in grid.jqueryui.js:

From

                "placeholder": {
                   element: function(item) {
                       var el = $(document.createElement(item[0].nodeName))
                       .addClass(item[0].className+" ui-sortable-placeholder ui-state-highlight")
                       .removeClass("ui-sortable-helper")[0];
                       return el;
                   },
                   update: function(self, p) {
                       p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10));
                       p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem.css('paddingRight')||0, 10));
                   }
               },

ts.grid.hDiv.scrollLeft = ts.grid.bDiv.scrollLeft;
}
},

then add change event in to the sortable like this

From

            if (ts.p.sortable.options) {
               $.extend(sortable_opts, ts.p.sortable.options);
           } else if ($.isFunction(ts.p.sortable)) {
               ts.p.sortable = { "update" : ts.p.sortable };
           }

if($.browser.mozilla)

{

ts.p.sortable.options = $.extend(ts.p.sortable.options || {}, {

change : function(e,ui) {

ts.grid.hDiv.scrollLeft = ts.grid.bDiv.scrollLeft;

}

Hope this helps.

Best Regards

Tony

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.

11/05/2010
15:12

Klaus

Member

Members

Forum Posts: 68

Member Since:
18/11/2009

Offline

Thank you very much!

This solution fixed the problem in Firefox.