Using JQgrid beforesearch and aftersearch for a loading dialog - filter

Question

I'm using jqgrid with a lot of data and, as the filter is taking too long, I'd like to show a dialog before the search and close it after the search.
The thing that's happening to me, is that when I run the filter in debug mode I see the methods that open and close the dialog get called before the search and after the search, but when I run the filter without interruptions I can't see the dialog, my filter waits 10 seconds or more to refresh the table but the dialog isn't shown.
is it a syncronous problem? or why isn't my dialog showing up?
Here's my code:
jQuery("#mytable").jqGrid('filterToolbar',{
searchOnEnter : false,
stringResult : true,
defaultSearch:'cn',
beforeSearch: openDialogLoading,
afterSearch: closeDialogLoading
}
);
function openDialogLoading(){
$( "#DialogLoading" ).dialog({
resizable: false,
autoOpen: false,
height: 110,
width: 50,
title: 'Loading...',
modal: true,
bgiframe: true
});
$( "#DialogLoading" ).dialog('open');
}
function closeDialogLoading(){
if ($( "#DialogLoading" ).dialog('isOpen')) {
$( "#DialogLoading" ).dialog('close');
}
}
Thanks

Answer 1

It's really important to know the details of the grid (options which you use). It's important to use local paging to have good performance with large number of rows. I created some demos for you which you can try and the the time of loading/sorting/filtering:
the demo1 uses 13 columns, 400 rows and the page size 20.
the demo2 uses 13 columns, 400 rows and the page size 400 (no local paging).
the demo3 uses 13 columns, 4000 rows and the page size 20.
the demo4 uses 13 columns, 40000 rows and the page size 20.
the demo5 uses 13 columns, 1000 rows and the page size 1000 (no local paging).
You can see that the performance of the grid depends very havy from the page size. You can play more with differnet values of columns, rows and the page size using the JSFiddle demo http://jsfiddle.net/OlegKi/1rmmyeLh/ where I used
rowNum: 20
UPDATED: The demo http://jsfiddle.net/1rmmyeLh/7/ which you posted later in the comment some important problems. Modifing the code so that it do displays the "Loading" gif with anymation is realtively easy, see http://jsfiddle.net/OlegKi/1rmmyeLh/8/.
I included the call of closeDialogLoading(); inside of loadComplete and modified beforeSearch so that it returns true instead of false, which prevent reloading of grid by jqGrid. Additionally I trigger reloadGrid inside of setTimeout manually:
.jqGrid("filterToolbar", {
beforeSearch: function () {
var $self = $(this);
openDialogLoading();
setTimeout(function () {
$self.jqGrid("setGridParam", { search: true })
.trigger("reloadGrid", [{ page: 1 }]);
}, 0);
startTime = new Date();
measureTime = true;
return true; // SKIP filtering
}
})
Such modification of the code solves the issue with displaying of the "Loading" div. On the other side I stay on my opinion, that the main problem which you have is in ingoring the usage of local paging of data (rowNum option).
I want to stress that it's better, in my opinion, to make the application quickly as to display some "Loading" massage and to hold the application slow. You use in the demo rowNum: 4000 with 4000 rows of data. On the other side I can see on my display about 35 rows of data only. If I just change rowNum from 4000 to 30 I see the peformance improvement in about 20 times!!! Now you should set clear your priorities. One can speak long about the difficulty for very stupid user to undesrtand the meaning of pager buttons, but in my opinion the difference in performance in 20 times makes any discussions unneeded. Practically every user have used already applications with pagers. So I strictly recommend you to use local data paging. You will be able to work in the style with much more large dataset (see the demo with 40000 rows and the page size 20, which responsibility is more as 3 times better in IE11 as the responsibility of the demo with 400 rows and no paging).