jqGrid column header display slows down when scrolling horizontally

Question

I am using jqGrid with a horizontal scrollbar, but when I use the horizontal scrollbar the column header does not move together with the columns. Once I stop scrolling the grid comes back to normal. See the attached picture:

This is happening in FF (4.0.1) but not in IE8.

Here are the grid options I use:

width:'800',
shrinkToFit:false,
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: 50,
rowTotal: 500,
sortorder: 'desc',
cellEdit: true,
cellsubmit: 'remote',
cellurl: 'MyURL',
beforeSaveCell: 
function (rowid, cellname, value, iRow, iCol) {
    return parse(value);
},
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true

....

jQuery(function(){
        jQuery("#listTable").jqGrid('filterToolbar',{
                            stringResult: true,
                            searchOnEnter: false });
    });

I have jqGrid version 3.8.2, jQuery 1.4.4 (full). Is there any way to fix this?

Answer 1

I suppose it's not a bug in jqGrid. What you describes looks like the difference how jQuery.scroll are implemented in different web browsers. I'll try to explain why I think so.

To understand where are the problem you should know that the column headers are not a part of the same HTML table. At the creation time the <th> elements which builds column headers are really in the <table>, but then there are moved in another div. So one have always so named hDiv (header div) and bDiv (body div). See the answer for details. Additionally the DOM element of table receive an expander (additional property) grid which save different additional information like grid.hDiv - the DOM element of the hDiv (header div) and grid.bDiv - the DOM element of the bDiv (body div).

Now about the scrolling. Because column headers are in another div the scrolling works asynchronous. To make it synchronized jqGrid register jQuery.scroll event handler for the <table> element (see here) and inside of the corresponding event handler scrollGrid execute the following code:

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

(see the line here). So on every scrolling event on the table the scroll position will be synchronized.

The effect which you describe seem for me that FF (4.0.1) fire the scroll event only after you drop the scroll box.