AuthorProxy AuthorProxy - 1 month ago 7
Javascript Question

Refreshing jqGrid doesn't save current page position with infinite scroll enabled

Example from http://www.trirand.net/demo/javascript/jqgrid/loading_data/scrollbar/index.html
Versions of Guriddo jqGrid JS: 4.7.0 and 4.7.1

(function ($) {
'use strict';
$(function () {
$('#jqGrid').jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: 'GET',
datatype: 'json',
page: 1,
colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'],
colModel: [{
name: 'OrderID',
key: true,
width: 75
}, {
name: 'CustomerID',
width: 150
}, {
name: 'OrderDate',
width: 150
}, {
name: 'Freight',
width: 150
}, {
name: 'ShipName',
width: 150
}],
width: 750,
height: 250,
rowNum: 20,
scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
pager: '#jqGridPager'
});
});
})(jQuery);


When I call 2 times:

$('#jqGrid').trigger('reloadGrid', {
page: 3
});


first time request: the page param is 3 as expected.

second time request: the page param is 1 !?

The same problems I see at refresh button with refreshstate: 'current', It doesn't work at all.

Answer

First of all I can confirm the bug. It exits in more old versions of jqGrid too (for example in jqGrid 4.6). The reason is in the following lines (see the lines of the source code)

if (ts.grid.prevRowHeight && ts.p.scroll) {
    delete ts.p.lastpage;
    ts.grid.populateVisible();
} else {
    ts.grid.populate();
}

jqGrid have undefined value of ts.grid.prevRowHeight on the first reload of the grid and the set ts.grid.prevRowHeight to 22 (22px is the height of row). So the next (the second) reload of the grid will use populateVisible instead of populate. The function populateVisible uses current scrolling position (scrollTop of bDiv) only and it ignores page parameter of the grid.

Thus I can suggest you multiple solution of the problem: If you have to use specific old version of jqGrid (like if you have to use jqGrid 4.7) then you can use the following code as workaround:

$('#jqGrid')[0].grid.prevRowHeight = undefined; // workaround!!
$('#jqGrid').trigger('reloadGrid', {
    page: 3
});

Alternatively you can fix the code of jquery.jqgrid.src.js for example to the following

if (ts.grid.prevRowHeight && ts.p.scroll && opts.page === undefined) {
    delete ts.p.lastpage;
    ts.grid.populateVisible();
} else {
    ts.grid.populate();
}

One more option which I can suggest you: you can load the current version of free jqGrid from github. It's my fork of jqGrid which is based on jqGrid 4.7 and which contains many enhancements (see wiki and the readme). I posted just now the corresponding fix.