Where should i use method before load Jqgrid and after load grid to block screen?

Question

I have written a functionality in java-script that blocks the screen and unblock the screen. Block screen means, it blocks the screen so user can not click anything(a loader icon comes on the screen).

There are two methods of UIBlocker.

1. UIBlocker.blockScreen()   // It blocks the screen.
2. UIBlocker.unblockScreen()  // It unblocks the screen.

Now, i need to block the screen when JQGrid is being loaded. I want to ask where should i use UIBlocker.blockScreen() and UIBlocker.unblockScreen().?

According to my findings, UIBlocker.blockScreen should be used in beforeRequest event because it fires before requesting data. But there also some other events that fire before load like beforeProcessing,loadBeforeSend. So i am still confuse about it.

The second thing is where should i use unblockScreen. In loadComplete or in gridComplete?

Here, i found the order of execution of jqgrid,

beforeRequest
loadBeforeSend
serializeGridData
loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)
beforeProcessing
gridComplete
loadComplete

Now suggest me, where should i use BlockScreen and unblockScreen?

Answer 1

You can consider to use loadui: "block" option first of all. It's the standard way which block the grid during loading the data from the server. It don't block the whole screen (the web browser).

If the above way is not what you need then you can implement alternative blocking. The solution will depend on the version of jqGrid and from the fork of jqGrid, which you use (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). You wrote that you use retro version 4.4.4. In the case you have not so many possibilities and the recommended way would be to use the following options/callbacks:

loadui: "disable",  // remove the standard grid blocking
loadBeforeSend: function () {
    UIBlocker.blockScreen(); // block the grid/screen
    return true;    // allow request to the server
},
beforeProcessing: function () {
    UIBlocker.unblockScreen(); // unblock the grid/screen
    return true;    // process the server response
},
loadError: function (jqXHR, textStatus, errorThrown) {
    UIBlocker.unblockScreen(); // unblock the grid/screen

    // display the eror message in some way
    alert("HTTP status code: " + jqXHR.status + "\n" +
        "textStatus: " + textStatus + "\n" +
        "errorThrown: " + errorThrown);
}

I remind you that the version 4.4.4 is really retro version published 3.5 years ago. You should consider to upgrade it to the current version (4.13.4) of free jqGrid. It's the fork of jqGrid, which I develop after making the main fork commercial and renaming it to Guriddo jqGrid JS (see the old post and the price list). Free jqGrid can be used free of charge under the same license agreement like the old version 4.4.4, which you use currently.

If you would use new version of jqGrid then the recommended way would be overwriting the progressBar method used by jqGrid

$.jgrid.extend({
    progressBar: function (options) {
        if (options.method === "show") {
            //alert("start blocking");
            UIBlocker.blockScreen();
        } else {
            //alert("stop blocking");
            UIBlocker.unblockScreen();
        }
    }
});

Answer 2

There are so many events associated with jqgrid like:

1. beforeRequest
2. gridComplete
3. loadComplete

Check the reference here Jqgrid event list