Issue with gridComplete in jqGrid

Question

I have a jQGrid which has loadComplete and gridComplete parameters. The grid is currently working fine.

Now I had to do a generic change where I need to add one more event which works on the events of the pager.

I added the below code to bind one more event with gridComplete.

jQuery('#grid0').jqGrid('setGridParam', { gridComplete: function()
            { 
                           myGenericMethod();

            }});

The problem with this code is : myGenericMethod() is called but the original gridComplete block is not executed.

I am sure @Oleg will be having the answer.

My grid declaration is below:

$("#grid0").jqGrid({
         datatype: "jsonstring",


    datastr:GetJSON1(),

    colNames:[strFieldNames[0], strFieldNames[1], strFieldNames[2], strFieldNames[3]],

    colModel:[ 
        {name:'newdynaid', index:'newdynaid', width: 50, editable:true, editoptions:{readonly:false, size:5}, hidden:true,sortable:false},

        {name:strFieldValues[1], index:strFieldValues[1], editable:false, readonly:true, width:80}, 

        {name:strFieldValues[2], index:strFieldValues[2], editable:false, readonly:true, width:80,
                hidden:false,sortable:true}, 

        {name:strFieldValues[3], index:strFieldValues[3], editable:false, readonly:true, width:80}

        ],


        postData: {},
        rowNum: 10,
        height: "100%",
        shrinkToFit: true,
        autowidth: true,
        rownumbers: false,
        pager: '#pager0',
        sortname: 'id',

        viewrecords: true,
        sortorder: "asc",
        emptyrecords: "Empty records",
        loadonce: true,
        sortable: true,

        rowList: [6,10,20,40,60,80,100],

        loadComplete: function() {
             var grid0 = jQuery("#grid0");
             var allDropDownElements = getAllDropDownElements0(); 
            var allDropDownElementRefTables = getAllDropDownElementRefTables0();
             processLoadComplete(grid0, allDropDownElements, allDropDownElementRefTables, 0);
             },
        gridComplete:function() {
             var grid0 = $("#grid0");
             var pager0Center = $("#pager0_center");
             processGridComplete(grid0, pager0Center, 0);
             onLoadpopulateName();
             }
        });

Answer 1

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.