What the Difference Between Loadcomplete and Gridcomplete Events

What the difference between loadComplete and gridComplete events?

I think that this question is asked by many users of jqGrid. So it's interesting to know the answer.

I personally prefer to use loadComplete. If you examine code from all my examples which I posted, you will find gridComplete only when the Original Poster posted it in the question and I would have modified a little code. I prefer to use loadComplete because of some advantages of loadComplete and disadvantages of gridComplete.

Here are advantages of loadComplete:

• It's the last callback which will be called if the whole grid body will be reloaded. For example after loading the page on the grid from the server. It's important to understand, that if the user changes sorting of some column or sets filter or chooses another page of the grid; the grid body will be reloaded.
• loadComplete has parameter data which represent full page of local data or full data loaded from the server.

On the other side gridComplete will be called (in the current version of jqGrid 4.4.4) from internal updatepager (see here), which will be called from delRowData (see here), addRowData (see here) and clearGridData (see here) methods; in addition to addXmlData (see here) and addJSONData (see here). It's not what one mostly want.

Another disadvantage of gridComplete one can see if one examines the code of addXmlData (see here) and addJSONData (see here) from where updatepager is called and so gridComplete will be called. If one uses loadonce: true and the internal parameters data and _index will be filled with full data returned from the server. One can see when using loadonce: true; the callback gridComplete will be called after the first page of data are loaded from the sever. At this moment data and _index contains only the data for the page. On the other side loadComplete will be called later after all data returned from the server are processed and saved locally in data and _index.

If you load the data from the server and if you don't use loadonce: true option, clearGridData, addRowData and delRowData then you could use gridComplete instead of loadComplete.

Why loadComplete fires before gridComplete?

There are small differences between loadComplate and gridComplete, but both will be called after the grid contain is prepared. So you can't just modify the data of the loadComplate to change the grid contain.

You don't posted the definition of your grid, so it is difficult to answer on your question exactly. What you probably want can be solved with respect of the custom formatter which you can define for the customerSite column. Inside of formatter function you have access to rowObject where you find source information to construct the customerName + ' / ' + siteDescription.

Issue with gridComplete in jqGrid

Starting with version 4.3.2 jqGrid supports jQuery Events together with callbacks. At the time I spend many my time to create the corresponding pull request which was merge to the main code of jqGrid. Later in free jqGrid I changed internal code of jqGrid so that practically every callback have the corresponding jQuery event. The events are very important if you need to write common actions (common callbacks) which need be done on every grid of your project. Only using the events one can write jqGrid plugin which don't reserves any callbacks.

The usage of events is very easy. It's important to understand that you can bind the events before jqGrid is created. It's especially important to do with events jqGridBeforeInitGrid (exist only in free jqGrid), jqGridInitGrid, jqGridGridComplete, jqGridAfterGridComplete, jqGridLoadComplete, jqGridAfterLoadComplete.

I would recommend you to read the answer which describes the differences between gridComplete and loadComplete. I personally use almost only loadComplete, but the choice of the callback depend on your exact requirements.

Let us you really need to use common gridComplete. Then you have choice to define some action after gridComplete used in the grid or before it. Depend on the choice you should use jqGridGridComplete or jqGridAfterGridComplete event. Let us jqGridAfterGridComplete is what you need. Then the code can looks as the following

$("#grid0").bind("jqGridAfterGridComplete", function () {
    // the event handler will be executed AFTER gridComplete
    ...
});
$("#grid0").jqGrid({
    // common options which you need
    pager: "#pager0",
    gridComplete:function() {
        var $self = $(this), p = $self.jqGrid("getGridParam"),
            pager0Center = $(p.pager + "_center"); //$("#pager0_center");
        ...
    }
});

The above code will work in both jqGrid (starting with version 4.3.2) and free jqGrid. If you would need to use an event which have options, like jqGridAfterLoadComplete then you should add first additional Event parameter and use the typical parameter starting with the second parameter:

$("#grid0").bind("jqGridAfterLoadComplete", function (e, data) {
    // the event handler will be executed AFTER loadComplete
    ...
});

By the way free jqGrid allows you to use pager: true and don't define an empty <div id="pager0"></div>. In the case free jqGrid generate the div with unique id automatically and modifies the pager option of jqGrid to id selecror. So you can use gridComplete callback exactly like in the above example. See the wiki article for more information.

jQgrid's gridComplete event is firing but loadComplete is not firing..... why?

The problem is you set datatype as a function (custom defined function for retrieving data) instead of local. If you use a function, then you should call loadComplete in your own implementation.

So if you change it to other type like local, the loadComplete will be handled automatically by jqGrid. I created a demo for you.

Demo

What causes jqgrid events to fire multiple times?

I personally almost never use gridComplete callback. It exists in free jqGrid mostly for backwards compatibility. I'd recommend you to read the old answer, which describes differences between gridComplete and loadComplete.

Some additional advices: it's dangerous to register events inside of callbacks (see $('.moreItems').on('click', ...). If you need to make some actions on click inside of grid then I'd recommend you to use beforeSelectRow. Many events, inclusive click event supports event bubbling and non-handled click inside of grid will be bubbled to the parent <table> element. You use already beforeSelectRow callback and e.target gives you full information about clicked element.

I recommend you additionally don't use setGridParam method, which can decrease performance. setGridParam method make by default deep copy of all internals parameters, inclusive arrays like data, which can be large. In the way, changing one small parameter with respect of setGridParam can be expensive. If you need to modify a parameter of jqGrid then you can use getGridParam without additional parameters to get reference to internal object, which contains all jqGrid parameters. After that you can access to read or modify parameters of jqGrid using the parameter object. See the answer for example for small code example.

About the JqGrid process events

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

---

Related Topics