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?

Promoter

You can consider to use loadui: "block" option first of all. To give the best answer on your question one have to know which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7) – Kass

Its jqgrid 4.4.4 – Promoter

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();
        }
    }
});

Kass

thanks for your answer. I want to ask that why you unblock in befroeProcessing? And what about if unblock in loadComplete? – Promoter

@Umer: It's better to unblock directly after asynchronous Ajax request is finished. The user has no possibility for interaction with the page during the later processing, but there are common case: excepting during processing of the server response. As the result the page could stay blocked on excepting if you would unblock it only inside of loadComplete. Unblocking inside of befroeProcessing is more safe from the point of view. Moreover I recommend you to upgrade jqGrid. – Kass

Ok thanks @Oleg. I will try to upgrade jqgrid to freejqgrid. You always help regarding jqgrid question. Thanks again. – Promoter

@Umer: You are welcome! After upgrading I would recommend you to use Font Awesome icons first of all, which improves the look of jqGrid. You need just include iconSet: "fontAwesome" option and the CSS (for example <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">, see here). There are a lot of other new features described in the wiki and READMEs to every published version. – Kass

Hmmmm. Nice to hear this @Oleg. You are still upgrading the grid. – Promoter

Answer 2

There are so many events associated with jqgrid like:

1. beforeRequest
2. gridComplete
3. loadComplete

Check the reference here Jqgrid event list

Baillieu

@Maynak thanks for your answer. I already checked this. I just need some suggestion. I think i should use block screen in beforeRequest event and unblock in loadComplete event. What you say? – Promoter

Ya, jsut like in ajax call we have beforeSend() and complete() in which we can show and hide loader. you can use it in the same way – Baillieu

hmmmm. Thanks for your suggestion. – Promoter