JQGrid: loadComplete NOT firing when datatype: function

Question

If I call a function to load my grid data, loadComplete does not fire. I need to handle this event so I can manually update multiselect checkbox correctly. If I update in

Answer 1

In your previous question you wrote that you use WCF on the server side. In the case you don't need to use datatype as function. Instead of that you can just use the following parameters:

datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (data) {
    return JSON.stringify(data);
}

To be sure that JSON.stringify are supported in old web browsers you should include json2.js which you can load from here.

In the old answer you can find more code examples (and download the demo) which shows how you can use WCF with jqGrid.

Now I will answer on your original question: "Why loadComplete does not fire" if you use datatype as function. The short answer is: if you use datatype as function your code is responsible for calling of loadComplete.

If you use datatype as function your code is responsible to some things which jqGrid do typically. So first of all you have to understand what should the datatype function do. An example from the documentation (see here) shows the simplest, but not full, implementation of datatype as function. More full code example looks like the following:

$("#list").jqGrid({
    url: "example.php",
    mtype: "GET",
    datatype: function (postdata, loadDivSelector) {
        var ts = this,  // cache 'this' to use later in the complete callback
            p = this.p; // cache the grid parameters
        $.ajax({
           url: p.url,
           type: p.mtype,
           dataType: "json",
           contentType: "application/json",
           data: JSON.stringify(postdata),
           cache: p.mtype.toUpperCase() !== "GET",
           beforeSend: function (jqXHR) {
               // show the loading div
               $($.jgrid.jqID(loadDivSelector)).show();
               // if loadBeforeSend defined in the jqGrid call it
               if ($.isFunction(p.loadBeforeSend)) {
                   p.loadBeforeSend.call(ts, jqXHR);
               }
           },
           complete: function () {
               // hide the loading div
               $($.jgrid.jqID(loadDivSelector)).hide();
           },
           success: function (data, textStatus, jqXHR) {
               ts.addJSONData(data);
               // call loadComplete
               if ($.isFunction(p.loadComplete)) {
                   p.loadComplete.call(ts, data);
               }
               // change datatype to "local" to support
               // "loadonce: true" or "treeGrid: true" parameters
               if (p.loadonce || p.treeGrid) {
                   p.datatype = "local";
               }
           },
           error: function (jqXHR, textStatus, errorThrown) {
               if ($.isFunction(p.loadError)) {
                   p.loadError.call(ts, jqXHR, textStatus, errorThrown);
           }
        });
    },
    ... // other parameters
});

You can see that the code in not so short. In the above example we still not support some jqGrid options like virtual scrolling (scroll: 1 or scroll: true).

Nevertheless I hope that I cleared now why I don't recommend to use datatype as function. If you use it you have to understand many things how jqGrid work internally. You should examine it's source code to be sure that you do all things correctly. If you skip somethings, than your code will works incorrect in some situations or in some combination of jqGrid parameters.

If you look at the code which I included at the beginning of my answer (the usage of ajaxGridOptions and serializeGridData) you will see that the code is very easy. Moreover it works with all other legal combination of jqGrid parameters. For example you can use loadonce: true, loadComplete, loadError or even virtual scrolling (scroll: 1 or scroll: true). All things needed depend on the parameters do jqGrid for you.