About the JqGrid process events

Question

Just want to better understand about JqGrid event process

• beforeRequest
• loadBeforeSend
• serializeGridData
• loadError
• gridComplete
• loadComplete

Based on this events

• If I want to add filter or extra parameters in on the ajax request to the server, I should do it in the loadBeforeSend right?
• After I get the data from server, if I want to prevent the data from showing up in the grid (i want to further process it first, and only display the processed data afterwards), I should do it in the gridComplete right?

Because my work requires me to add extra parameters when sending request to the server, and after receiving the data, I need to stop the grid from displaying the data on the grid so that I can process the data further, before displaying the processed data on the grid. But I couldn't seem to grasp which event that JqGrid has should I put my function to.

Thanks

---

EDIT:

For the postData part

loadBeforeSend: function() {
    if (sessionStorage.pathStates == "edit" && location.pathname.indexOf("list") > -1) {
        console.log("SUCCESS");
        loadFilter();
    }
},

And the loadFilter

function loadFilter() {
    var filter = JSON.parse(sessionStorage.filter);
    var filterInput = [],
        model = [],
        filters = {};
    filterInput = filter.filterInput;
    model = filter.model;
    var grid = filter.grid,
        page = filter.page,
        op = "bw",
        a = 0,
        b = 0;

    filters = {
        groupOp: "AND",
        rules: []
    };

    for (var i = 0; i < model.length; i++) {
        if (filterInput[a].length > 0) {
            filters.rules.push({
                field: model[a],
                op: "bw",
                data: filterInput[a]
            });
        }
        a++;
    }

    $(grid).jqGrid('setGridParam', {
        search: true,
        postData: {
            filters: JSON.stringify(filters)
        }
    }).trigger('reloadGrid');
}

As for beforeProcessing, I still have no idea on this one yet. But the process that I had in my mind is something like this

beforeProcessing: function(data) {
     if (sessionStorage.pathStates == "edit" && location.pathname.indexOf("list") > -1) { >>
         Filter data based on certain criterias, like
         for example, changing one of the column format, or only displaying data that has the value of xxx on certain column >>
             Return the filtered data
     }
 },

Stylograph

Answer 1

I find your question interesting. I agree that the current documentation of jqGrid describes processing of events and callbacks not clear enough. So I'll describe in the answer first of all the processing in details. I will tace in considerations only the case of remote datatype which you need (datatype: "json" or datatype: xml). Later I'll came back to you specific case and write my recommendations for you.

Before calling of beforeRequest callback jqGrid build data parameters used in the corresponding Ajax request which will be sent to the server.

• prmNames option allows to configure the names of standard parameters which will be send per Ajax to the server. The same option prmNames allows to remove some parameters by setting the corresponding value to null.
• postData option allows to extend parameters which will be send to the server. The value of postData option will be used in $.extend (see here) to combine the additional parameters with the standard parameters. jqGrid uses the resulting postData option as the value of data parameter of jQuery.ajax. jQuery allows to use data either as string or as object with properties of functions. Using function is very helpful in some scenarios: see the answer for more details.
• jQuery event "jqGridBeforeRequest" will be triggered. One can return "stop" string of false boolean value to stop later processing of the requests to the server. One can modify postData parameter inside of "jqGridBeforeRequest" event handle.
• callback beforeRequest works exactly like jQuery event "jqGridBeforeRequest", but one can define only one callback per grid. The callback can return false to stop request. One can use this to access to parameters of the grid (see the answer).
• The optional serializeGridData callback is the past possibility to control the information which will be send to the server. If the callback serializeGridData is defined it should return either a string which will be send to the server or the object with properties or functions. The returned object will be used as the value of data parameter of jQuery.ajax.
• during processing of Ajax request jQuery can calls additionally functions defined in postData. Additionally jQuery will calls loadBeforeSend. One can use the loadBeforeSend callback for example to modify/extend HTTP headers of the Ajax request. See the answer provide an code example. One can returns false from loadBeforeSend to force stopping the Ajax request.

Now jQuery,ajax wait a little for the response from the server. It's possible to change default timeout values if required. See the answer.

If the one get the response from the server and the response contains successful HTTP status code (the value less then 400) then jqGrid interpret the response as successful and process it in one way. Failed responses will be processed in another way.

There are important beforeProcessing callback which allows to pre-process the server response before it will be processed by jqGrid. One can modify or extend the data returned from the server. See the answer for example. Additionally jqGrid allows to break standard processing of the server response by beforeProcessing callback. If the callback returns false then jqGrid break the processing and just ignore the server response.

Then jqGrid process the server response. It will be interpreted either as JSON or XML response based of datatype option of jqGrid. During processing of the data some other callback functions defined inside of jsonReader or xmlReader (see here) or defined in jsonmap/xmlmap (see here and here examples) could be called.

After the visible page of data are processed jqGridGridComplete event will be triggered, the gridComplete callback will be called and then jqGridAfterGridComplete will be triggered.

After the whole server response will be processed (it's especially important if you use loadonce: true option) then jqGridLoadComplete event will be triggered, loadComplete callback will be called and jqGridAfterLoadComplete event will be triggered.

I recommend you to read the answer which describes in details differences between loadComplete and gridComplete.

On the other side, if the server response failed because of timeout or because the response contains failed HTTP status code, no from above callbacks will be called. Instead of that only loadError callback are called. The answer discuss the callback in details. I strictly recommend to defineloadError callback in all your productive code which uses jqGrid. It should displays some error message to the server.

Now I'll came back to your specific case.

I would recommend you to use postData add extra parameters when sending request. All static parameters you can directly define as properties. All dynamic parameter you can define as functions.

Additionally I would recommend you to use beforeProcessing callback. It allows for example to stop the grid from displaying the data. You can read and analyse the data returned from the server. One can easy modify the data (for example remove some fields).

Obryant

Terrific explanation! – Clone

Exactly a terrific and wonderful explanation. Thanks so much Oleg :) So from the way you described it, the postData should be defined in loadBeforeSend, while to process server response, do it in beforeProcessing am i right? – Stylograph

@FredA: You are welcome! postData is just an option like any other and you can define it directly during creating the grid. loadBeforeSend seems me not needed in your case. The callback beforeProcessing can you use to modify the server response before it will be processed by jqGrid. – Obryant

I tried the postData just now on loadBeforeSend, and the JqGrid sent 2 requests (checked in the inspector under network), one with the filters from the postData and one more is the normal request to pull all data. Seems like i did it right in using postData but didn't expect the jqGrid to send a request again. Did i do something wrong? (after i set the postData, i set it to reloadGrid again. Is this the right approach to insert filters in the request?) – Stylograph

@FredA: It's better if you append the text of your question with the code which you use now. I suppose that you should not use loadBeforeSend at all. – Obryant

Hi Oleg. I modified my original question to include the codes that i have. Please look at it and tell me if there was any problem with my way of doing? Also for the beforeProcessing, the one you included was to modified the value in one of the column right? Do you have any other example, like only showing data that meet certain condition (like showing only data based on the value on a certain column). – Stylograph

@FredA: What you try to do is not adding extra parameters when sending request to the server. You try to overwrite existing parameter filters and the option search. It's wrong in the way. The option search is processed already and the parameter _search will be added to postData. I wrote that loadBeforeSend should be used to set HTTP headers and not to modify the data. loadBeforeSend will be called by jQuery.ajax. So the data which will be send are already prepared and you have only modify the headers of HTTP request. – Obryant

@FredA: An example of modification of the data returned from the server inside of beforeProcessing callback you can find in the answer which I referenced in my answer. Many other my answers where the callback are mentions you will find here. – Obryant

@FredA: I see that you try to load the filter from sessionStorage. I suppose that it's better if you set the options before the grid will be created. Look at the answer and this one where I use localStorage. You can examine the source code of the demo. One can set filter, sorting and so on and reload the whole page. One sees that the filters will be do applied. Is it what you want to implement? – Obryant

Let us continue this discussion in chat. – Stylograph

Ok so i managed to complete the beforeProcessing part. But i'm still stuck with the beforeRequest part. While i managed to include the filter into the request, when i checked on the inspector's network, it showed 2 same requests being made to the server. And as a result, the grid displayed 2 sets of same filtered data. I used loadonce: true to disable the 2nd set of data from showing in the grid, but now it shows empty rows under the first set of data. Is there any configuration that i missed here? – Stylograph

Ah i got it already. After i trigger loadFilter inside the beforeRequest function, i set it to return false to disable request from being send to the server. Not sure if this is a right approach but it works. – Stylograph