Is it possible to bind multiple event handlers to JqGrid events without overwriting previous ones?

For example, I call my default settings on every page load and bind a function to loadComplete to do some basic formatting for my grids.

On some pages, I have additional logic I would like 开发者_如何学运维to execute at the same time, but if I set loadComplete in the grid definition, it will overwrite the function set in my defaults.

Is there a way to bind multiple handlers, or some other way of executing all the necessary code? Thanks in advance.

I think you ask about an important problem existing in the current version of jqGrid. It's difficult to implement more as one event handler in jqGrid now. The problem is not important for small projects where you use jqGrid, but can be important in case that you want construct some classes which interprets jqGrid. Your current workaround is OK, but have the restriction which you understand yourself. The main problem that in the way you can implement only one more additional loadCompleteEx handler.

What I would suggest you is the usage of jQuery.trigger or better jQuery.triggerHandler. You can use it together with jQuery.bind and jQuery.unbind. In the way you can define any number of event handlers which works like standard jQuery events.

For example,

var grid = $("#list");

grid.bind('jqGridLoadComplete',function(e,data) {
    alert ("in first jqGridLoadComplete event handler. Called for the page " +
           data.page);
});
grid.jqGrid({
    // jqGrid parameters
    // ...
    loadComplete: function(data) {
        alert("main load complete");
        $(this).triggerHandler("jqGridLoadComplete", data);
    }
});
grid.bind('jqGridLoadComplete.jqGrid',function(e,data) {
    alert ("in second jqGridLoadComplete event handler. Called for the page " +
           data.page);
});

In the second jQuery.bind I used namespaced event 'jqGridLoadComplete.jqGrid' from the namespace 'jqGrid'. So you can use everything which you know (and which you need) about standard events in jQuery.

See the corresponding demo here. Try to switch the pages in the grid or change the sorting to call loadComplete.

I bind the second jqGridLoadComplete after the jqGrid definition. Because my demo uses datatype:'local' the first call of loadComplete will be before the binding executed. So at the first loadComplete execution will be the second jqGridLoadComplete event handler not called. So you should better to bind your event handler before the jqGrid definition. In the case you can be sure that the event will be always called.

UPDATED: IMPORTANT!!!. One don't need to trigger jqGridLoadComplete event explicitly inside of loadComplete if you use the current version of jqGrid. jqGrid do this already for you. The above code was written before the corresponding functionality are included in the main code of jqGrid. The answer just described the main idea how multiple event handlers could be implemented in jqGrid. After writing the answer I posted some pull requests to trirand with my suggestion to implement jQuery events in jqGrid. Starting with the version 4.3.2 (see here) jqGrid support the events.

if you want to do something before the request use the beforeRequest function.

you can also bind a function to the gridComplete option. could you give a code example to show what you are trying to do?

My hackaround solution:

// Global Variable in my common.js
var loadCompleteEx;

// set defaults
$.extend($.jgrid.defaults, {
     datatype: 'json',
     height: "100%",
     ...
     loadComplete: function () {
         if ($("#grid").getGridParam("reccount") === 0)
            $("#empty-grid-message").show();
         else
            $("#empty-grid-message").hide();

         // if loadCompleteEx is defined, call it at the end of loadComplete
         if (loadCompleteEx)
             loadCompleteEx();
      }
}

// In my specific page js
loadCompleteEx = function () {
    // Do more stuff after load completes
};

Works like a charm...is there any bad practice in here?

There is a much easier solution to this than I have seen recommended anywhere else:

// Set defaults
jQuery.extend(jQuery.jgrid.defaults, {
    loadComplete: function () {
        myCustomFunction();
    }
});

loadComplete: function() {
    // someOtherFunction();
    $.jgrid.defaults.loadComplete(); // Runs myCustomFunction()
},