How do I override the default search functionality in JQGrid

Question

Problem

Indeed, jqGrid does not let you define you own filtering function to apply when filtering local data. What you want to achieve is possible but far from straightforward. One reason is that jqGrid relies on jLinq to perform the search. But it does not simply call jLinq to do the search, the code of jLinq was copy-pasted into jqGrid code and called in the middle of the grid internals... Which makes it impossible to extend the search feature in a clean way.

This is why you got stuck when trying to provide your own change event handler. The default code of the handler is:

function(){
    triggerToolbar();
    return false;
}

And the triggerToolbar function is a "do everything" function that will reload the data, re-draw the complete grid will all the library machinery, and somewhere in the middle filter the data without any hook for you to intercept the search function.

From here, I can see three solutions:

Request the feature to jqGrid developers
Modify the code of jqGrid. When I had a look it seemed difficult to do so while making sure you are not breaking the library.
The hacker way: let believe jqGrid that the data comes from a server, and filter it yourself

Solution

I will expand only on the third solution. The idea is to use the fact that jqGrid uses jQuery to talk to the server and register an ajax proxy in jQuery. This proxy will intercept all ajax calls, and return your local data filtered according to the query parameters sent by jqGrid. This will execute all the jQuery machinery any time the filters are changed, but it works.

1. Create the proxy

The first step is to convert your current setting into one where jqGrid believes the data comes from a server. You do this with the function $.ajaxTransport (documentation), to which you provide a function that will be called before any ajax call. Based on the options, you can decide whether you want to provide your own object that will take care of the call, or let $.ajax() do its usual job. I based this decision on a known url, which we will give to jqGrid later. This can be anything, as long as it is NOT cross-domain (don't use the current URL like me if it may contain query parameters). Here is the code:

var mydata = [ /* Your local data */ ];
var gridurl = window.location.href + "/mygrid";

$.ajaxTransport("json", function(options) {
  if(options.url.indexOf(gridurl) === 0) {
    return {
      send: function(headers, completeCallback) {
        setTimeout(function(){ //We still want the call to be asynchroneous
            completeCallback(200, "success", {json: mydata});
        }, 10);
      },
      abort: function() {
        //Do nothing
      }
    };
  }
});

And the updated jqGrid settings:

$("#grid1").jqGrid({
    url:       gridurl,
    datatype:  "json",
    height:    250,
    colNames:  ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
    /* ... */
});

//No call to addRowData

2. Implement the filter

Once you have done step 1, you should already be able to load and display the grid. Now let's modify the proxy so that it filters the data according to the search parameters that jqGrid has put in the url. Indeed when working with remote data, jqGrid relies completely on the server to filter the data. It simply appends query parameters to the url, where the parameter name is the column id and the parameter value is the value of the form element. For example: ?page_name=home&row_timestamp=2014-2-01_2014-2-28 if you have entered "home" in the text field of "CF template" and "February" in the dropdown of "Error date".

So the first thing we need is a way to parse the query parameters of the URL. You could use a jQuery plug-in, write your own, or ask StackOverlfow :)

function getParameterByName(url, name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then a function to filter the data. The design will be mostly up to you and your requirements (you could imagine making this easier by using jLing, just like jqGrid did). I used a basic example where we want to filter the row_id based on a range. The row_id parameter is split with _ to parse the bounds of the range. Note that in my example I consider only row_id, but you will have to write the filter for all the columns, even the ones that were taken care of by jqGrid previously (the proxy has to behave like the server would).

//Filtering split in two functions: 
// -one to parse the url and identify what filters to apply
// -one to do the actual filtering

function getFilterOptions(url) {
    var filterOptions = {};
    var row_id = getParameterByName(url, "row_id"); 
    if (row_id && row_id != "*") { //"*" == Any
        filterOptions.row_id = row_id.split("_");
    }
    return filterOptions;
}

//Uses Array.filter(), may require a polyfill on older browsers
function filterData(data, filterOptions) {
    return data.filter(function(row) { 
        if (filterOptions.row_id) {
            return filterOptions.row_id[0] <= row.row_id 
                && row.row_id <= filterOptions.row_id[1]
        }
        return true;
    });
}

Then update the proxy to use the filter.

$.ajaxTransport("json", function(options) {
  //options.url is the query sent by jqGrid, including search parameters
  if(options.url.indexOf(gridurl) === 0) {
    var filterOptions = getFilterOptions(options.url); 
    return {
      send: function(headers, completeCallback) {
        setTimeout(function(){
            //this is what jqGrid will receive.
            var filteredData = filterData(mydata, filterOptions);
            completeCallback(200, "success", {json: filteredData});
        }, 10);
      },
      abort: function() {
        //Do nothing
      }
    };
  }
});

And finally, activate the search in the jqGrid settings. I have replaced the joker value 0 with *, and the other values with the format <min>_<max> to be parsed by getFilterOptions():

$("#grid1").jqGrid({
    url:       gridurl,
    datatype:  "json",
    height:    250,
    colNames:  ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
    colModel:  [{/* template column */},
               {/* date column */},
               {   
                name: 'row_id',
                index: 'row_id',
                width: 100,
                sorttype: 'int',
                search:true,
                stype:'select',
                searchoptions: {
                    value: {
                        '*':'Any', //Notice: joker used in getFilterOptions
                        '0_12000000000':'0 - 12000000000', 
                        '12000000000_24000000000':'12000000000 - 24000000000',
                        /* ... */
                    }
                    //no event handler
                }
               },
               /* ... */
               ],
    /* ... */
});

3. Finish the filter implementation, and enjoy!

You still have a bit of work to do, namely designing and writing the actual filters, but you have a working solution to have a custom search in jqGrid. I tested it on a local set-up with your test data, didn't face any trouble. Let me know if I forgot something while converting my code into this answer.