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
     }
 },

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).