Forum
Log In
Home
Topic RSS
Related Topics
19:55
23/08/2011
Offline
Hi,
We're planning to use jqGrid.
As we're planning to use it over thousands of entries one requirement is to use virtual scrolling, over dynamically loaded date.
This seems to be fine when just loading page by page. But when using the slider a lot of requests may be issues and eventually the page may not actually appear - only when paging up/down everything is displayed again.
This happens in Firefox and IE the same.
I can't reproduce this using your demo page. I pressume this is because loadonce is set to true and it doesn't actually go to the server again.
Is this a known issue?
Thank you for your help
D.
16:23
23/08/2011
Offline
I believe I identified the issue. It seems it can be best reproduced by just pressing the mouse down on the scrollbar for a while (so that it will issue multiple requests in a short time). Sometimes an older request may take a little longer and arrives after a more recent page request.
The issue didn't occure anymore after I amended the populate function (in grid.base.js) to remember the page number at request time and then compare it with the page number requested last before processing the result (ajax success).
e.g.:
var pageNo = ts.p.postData.page;
$.ajax($.extend({
...
success:function(data,st) {
// check that the page number of this request (pageNo) is matching the page number
// requested last (ts.p.postData.page)
if (ts.p.postData.page == pageNo) {
if(dt === "xml") { addXmlData(data,ts.grid.bDiv,rcnt,npage>1,adjust); }
else { addJSONData(data,ts.grid.bDiv,rcnt,npage>1,adjust); }
if(lc) { lc.call(ts,data); }
if (pvis) { ts.grid.populateVisible(); }
if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}
}
data=null;
endReq();
},
(I could provide a patch file)
I don't know whether this may have any negative side effect but it seem to be working fine.
18:22
05/05/2011
Offline
I hold mouse down for 30 seconds in scrollbar for 10000 rows table, page size is 80 but could not reproduce the issue. I used settings:
jQuery.extend(jQuery.jgrid.defaults, {
datatype: "json",
mtype: 'POST',
scroll: 1,
viewrecords: true,
rowNum: 80,
multiselect: true,
multiboxonly: true,
scrollrows: true,
prmNames: {
// npage: "_npage",
id: "_rowid", page: "_page", rows: "_rows", oper: "_oper", sort: "_sidx", order: "_sord" },
autoencode: true,
gridview: true,
toppager: true,
serializeGridData: function (postData) {
var myPostData = $.extend({}, postData);
myPostData._filters = myPostData.filters;
delete myPostData._oper;
delete myPostData.filters;
delete myPostData.searchField;
delete myPostData.searchString;
delete myPostData.searchOper;
return myPostData;
}
});
I tried both localhost and remote data. You can try those settings to reproduce the issue. If problem persists, you can provide exact steps. I can provide test account to you where you can reproduce the isse. Also you may consider to use npage extension (comment out line in settings above and implement in controller) to speed up data retrieval.
13:51
23/08/2011
Offline
Thank you for your response.
In my example I've set rowNum to 10 which will make multiple concurrent requests more likely (we'll increase rowNum eventually). So with a rowNum of 80 it might be more likely to happen by moving the scrollbar around randomly.
Ultimately you'll have to get the server to take longer to respond for one of the requests though to be able to reproduce the issue.
While I was debugging it I added logging and got the following results:
GET http://.../?...0&page=19&...
200 OK
7.69s
GET http://.../?...0&page=14&...
200 OK
2.23s
GET http://.../?...0&page=56&..
200 OK
8.22s
GET http://.../?...0&page=16&...
200 OK
2.18s
GET http://.../?...0&page=15&...
200 OK
1.76s
GET http://.../?...0&page=17&...
200 OK
2.26s
updatepager: rh=24, ts.p.page=15, base=120, to=150, rows.length=30, top=2880, height=17640, ts.p.records= 735
updatepager: rh=24, ts.p.page=17, base=130, to=170, rows.length=40, top=3120, height=17640, ts.p.records= 735
updatepager: rh=24, ts.p.page=19, base=140, to=190, rows.length=50, top=3360, height=17640, ts.p.records= 735
updatepager: rh=24, ts.p.page=56, base=500, to=560, rows.length=60, top=12000, height=17640, ts.p.records= 735
You can see that the request for page 56 took longer than the more recent request for page 17. Using Firebug I could see that it did generate all of the rows fine for that request but that the table was displayed at the wrong position (the div above it had the wrong size). After adding the code to ignore the response for anything but the last requested page the problem seem to be fixed.
14:33
05/05/2011
Offline
I changed page size to 10 and added
Random rand = new Random(DateTime.Now.Millisecond);
System.Threading.Thread.Sleep(rand.Next(0,1000));
to start of controller.
I applied your patch using code below but problem persists. After holding and releasing mouse button sometimes screen is empty, sometimes only 10 rows are displayed. So it looks that this patch does not fix the issue
if (!ts.grid.hDiv.loading) {
var pvis = ts.p.scroll && npage === false;
var prm = {}, dt, dstr, pN = ts.p.prmNames;
if (ts.p.page <= 0) { ts.p.page = 1; }
if (pN.search !== null) { prm[pN.search] = ts.p.search; } if (pN.nd !== null) { prm[pN.nd] = new Date().getTime(); }
if (pN.rows !== null) { prm[pN.rows] = ts.p.rowNum; } if (pN.page !== null) { prm[pN.page] = ts.p.page; }
if (pN.sort !== null) { prm[pN.sort] = ts.p.sortname; } if (pN.order !== null) { prm[pN.order] = ts.p.sortorder; }
if (ts.p.rowTotal !== null && pN.totalrows !== null) { prm[pN.totalrows] = ts.p.rowTotal; }
var lc = ts.p.loadComplete;
var lcf = $.isFunction(lc);
if (!lcf) { lc = null; }
var adjust = 0;
npage = npage || 1;
if (npage > 1) {
if (pN.npage !== null) {
prm[pN.npage] = npage;
adjust = npage - 1;
npage = 1;
} else {
lc = function (req) {
ts.p.page++;
ts.grid.hDiv.loading = false;
if (lcf) {
ts.p.loadComplete.call(ts, req);
}
populate(npage - 1);
};
}
} else if (pN.npage !== null) {
delete ts.p.postData[pN.npage];
}
if (ts.p.grouping) {
$(ts).jqGrid('groupingSetup');
if (ts.p.groupingView.groupDataSorted === true) {
prm[pN.sort] = ts.p.groupingView.groupField[0] + " " + ts.p.groupingView.groupOrder[0] + ", " + prm[pN.sort];
}
}
$.extend(ts.p.postData, prm);
var rcnt = !ts.p.scroll ? 1 : ts.rows.length - 1;
if ($.isFunction(ts.p.datatype)) { ts.p.datatype.call(ts, ts.p.postData, "load_" + ts.p.id); return; }
else if ($.isFunction(ts.p.beforeRequest)) { ts.p.beforeRequest.call(ts); }
dt = ts.p.datatype.toLowerCase();
switch (dt) {
case "json":
case "jsonp":
case "xml":
case "script":
// AM. next line added from http://www.trirand.com/blog/?p.....the-slider
// START PATCH
var pageNo = ts.p.postData.page;
// END PATCH
$.ajax($.extend({
url: ts.p.url,
type: ts.p.mtype,
dataType: dt,
data: $.isFunction(ts.p.serializeGridData) ? ts.p.serializeGridData.call(ts, ts.p.postData) : ts.p.postData,
success: function (data, st) {
// AM. next 3 lines added from http://www.trirand.com/blog/?p.....the-slider
// START PATCH
// check that the page number of this request (pageNo) is matching the page number
// requested last (ts.p.postData.page)
if (ts.p.postData.page == pageNo) {
// END PATCH
if (dt === "xml") { addXmlData(data, ts.grid.bDiv, rcnt, npage > 1, adjust); }
else { addJSONData(data, ts.grid.bDiv, rcnt, npage > 1, adjust); }
if (lc) { lc.call(ts, data); }
if (pvis) { ts.grid.populateVisible(); }
if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
// AM. next line added from http://www.trirand.com/blog/?p.....the-slider
// START PATCH
}
// END PATCH
data = null;
endReq();
},
18:28
23/08/2011
Offline
Thank you for reproducing the issue.
I should have mentioned that I configured the height of the grid to be still less than 10 rows. i.e. 10 rows should fill a page.
I wasn't sure whether my fix would work for page boundaries although I couldn't produce any issue with it. I don't know why it would be blank though.
(The patch seem to be applied correctly)
If you're setup is public I'd be happy to have a look myself as well.
(Of course, I'd be more than open for any other kind of fix)
19:03
05/05/2011
Offline
It seems that I cannot reproduce issue after this patch.
I tried adding random delays max 20 ms and max 2000 ms and 10 page size with grid bigger or smaller than 10 rows and also tried page size 50.
Tony, can you add this patch, please?
Can you create push request in github so it can be easily added, please.
anyway you should implement npage extension. This decreases number of requests and increases jqgrid speed.
13:01
23/08/2011
Offline
I managed to add the pull request (change id: I15fa3b5b9269403262eb5c9fa3b62122ae6158e6).
I also followed your suggestion to use npage which seem to work fine (it does always appear to be requesting 2 pages).
13:14
05/05/2011
Offline
You should be aware that npage option as serious bug as descibed in
http://stackoverflow.com/quest.....-in-jqgrid
and in bugs forum here. those occurs even after your patch is applied.
In this case jqGrid requestes one page and shows it in the middle of grid. I can send you testcase about this.
Maybe your patch can changed to fix this also.
16:41
23/08/2011
Offline
Thank you for pointing this out.
The other issue seems to have different cause. I'd suggest to keep them separate.
(I don't think our users will use ctrl+end)
Perhaps a workaround to the other problem is to ignore the page if it is the same as the last one. But it would be better to prevent that before requesting the page.
16:46
05/05/2011
Offline
This issue occurs without ctrl+end also: if scrolled by scrollbar or editing starts.
19:22
23/08/2011
Offline
But the problem only occures in combination with the npage extension?
If so, then it would suggest that the problem isn't that it is processing old responses after more recent ones.
i.e. it would either be an issue with the actual request being generated or when it's processing the response (e.g. it may request overlapping pages and when processing the response it may not handle that correctly at assumes that the response needs to be appended in full)
(Unofrtunately I won't have the time to debug that issue right now)
19:34
05/05/2011
Offline
If npage: parameter is removed, this issue does not occur.
14:17
05/05/2011
Offline
If
is used, pressing Ctrl+End in 10252 rows table retrieves pages 205,206,181,182,205,206,181,182,.. etc forever.
jqGrid enters into infinite loop.
Aslo maybe commit https://github.com/tonytomov/jqGrid/commit/e24a7ecdbd830b00e30ad2785045af1fe366ce09 that without loadui: 'block' it is not possible to use virtual scrolling.
16:00
10/08/2009
Offline
Hello Andrus,
If you quote me, please, do it correct. I wrote you: "I don't use virtual scrolling myself. ... There are too many effects which can be difficult reproduced and debugged. So I can't help you currently in any question about virtual scrolling."
I recommended you additionally to use loadui: 'block' to have less problems with multiple Ajax requests which queueing is not possible in jqGrid.
I want to repeat one more time: I don't use virtual scrolling myself and can't help you in any question about virtual scrolling. Please hold me away from any discussion about virtual scrolling.
Regards
Oleg
Most Users Ever Online: 715
Currently Online:
34 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
