How to do pre and post method call of loadComplete and onSelectRow of jqGrid genecally?

Question

I have special implementation for my grid.
For this I wrote some code in onSelectRow and loadComplete methods of jqGrid.

In onSelectRow I need to update a global array and in loadComplete method I have to access the global array and need to some manupulation in jqGrid.

Till then I am okay. I've already done this. Now I want to extend these two method in such a way that is implementation will be generic (other grid can use this without writing any code).

For that I thought of below steps.

1. I want to add a new js (e.g: jquery.jqGrid.additional.js) in my html with jqGrid.js

2. I want to assign my global variable by the data array of jqGrid

3. In this js I want to check the value of multiselect of the grid

4. If the value is true, then I want to extend onSelectRow, loadComplete methods in such way that jqGrid execute both my methods and the code written in onSelectRow, loadComplete methods also.

For example I have preLoadComplete and postLoadComplete which need to be executed just before and after loadComplete method execution. Similarly this hold true for onSelectRow method also.

I wrote below code in jquery.jqGrid.additional.js and then didn't get the alert (1), alert (2) after jqGrid load.

It only execute the code written in loadComplete method of jqGrid.

var oldLoadComplete = $.fn.jqGrid.loadComplete;

$.jqGrid.extend({
   loadComplete: function (){
      var ret;
      // do someting before
      alert(1);

      ret = oldLoadComplete.call (this);

      // do something after
      alert(3);

      return ret; // return original or modified results
   }
});

I tried a lot with this and spent many hours.

Answer 1

You are trying to extend $.jqGrid, not $.fn.jqGrid. In the first line that would mean that $.jqGrid doesn't even exist and that all elements would not have access to your modified .jqGrid plugin but still to the default.

Though I tried to extend $.fn with a "new" append method did not work. You might have to overwrite those methods explicitly. I could imagine that jQuery has some safety routines for itself and plugins built in in the $.extend method.

var oldLoadComplete = $.fn.jqGrid.loadComplete;

$.fn.jqGrid.loadComplete = function( ) {
    alert('pre');
    var ret = oldLoadComplete.apply(this, arguments); // In case any arguments will be provided in future.
    alert('post');
    return ret;
};

Edit:

Forget about all that. It is irrelevant. After looking into jqGrid's source code on GitHub a little, it is obvious that jqGrid does not even use something like $.fn.jqGrid.loadComplete. That is something you made up yourself. Instead, it creates another object which provides a list of possible properties and defaults which then is overwritten by custom defaults and finally by the function parameter you pass in with your call to jqGrid.

I found out that jqGrid triggers two events jqGridLoadComplete and jqGridAfterLoadComplete on your set of matched elements (i.e. this) before and after the call to the loadComplete callback respectively.

So basically, you cannot use your attempt. Instead, the only solution that comes to my mind is to overwrite the jqGrid "constructor" (i.e. $.fn.jqGrid) using the same method and apply listeners to this like so:

var oldJqGrid = $.fn.jqGrid;

$.fn.jqGrid = function( ) {
    this.on('jqGridLoadComplete', function( jqEvt ) {
            alert('Pre');
        })
        .on('jqGridAfterLoadComplete', function( jqEvt ) {
            alert('Post');
        });
    return oldJqGrid.apply(this, arguments);
};

About your multiselect... I don't know what you're talking about. I have only very limited time myself and have to deny further assist for now.

Sincerely.