Klaus on Column reordering - header display problem

Tue, 11 May 2010 15:12:44 +0300

Thank you very much!

This solution fixed the problem in Firefox.

tony on Column reordering - header display problem

Tue, 11 May 2010 14:21:02 +0300

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

Klaus on Column reordering - header display problem

Mon, 10 May 2010 14:16:21 +0300

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)

tony on Column reordering - header display problem

Fri, 07 May 2010 11:27:33 +0300

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

Klaus on Column reordering - header display problem

Thu, 06 May 2010 16:25:30 +0300

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.

jQuery Grid Plugin - jqGrid - Topic: Column reordering - header display problem

Klaus on Column reordering - header display problem

tony on Column reordering - header display problem

Klaus on Column reordering - header display problem

tony on Column reordering - header display problem

Klaus on Column reordering - header display problem