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

Question

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.

Ap

Answer 1

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.

Peay

Would a potentially simpler solution be using my response with an array of functions, executing all of them in sequence? I'm guessing it's more conventional/better practice to utilize the bind functions. – Ap

@IronicMuffin: There are different small subquestions and different kinds of usage which are possible. The bind method uses jQuery.data with events as the key. The value has jqGridLoadComplete as an array (see here). If you just use loadCompleteEx as array yourself you can implement the current workaround, but you should be careful. Where allocate the array? Will it work with more as one grid and so on. I find the "trigger"-way more flexible. – Peay

Answer 2

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?

Syreetasyria

gridComplete only fires once, and if I have formatting I need done on every load, then that won't work. For example, I have a custom message I show if the grid is empty. I have to check for that on every load. Now, if I want to do additional logic for an empty grid, I can't just add to loadComplete, because it overwrites. – Ap

Answer 3

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?

Ap

Answer 4

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

Flitting