How do I override the default search functionality in JQGrid

Question

I have a JQGrid setup with the search bar appearing at the top. For text fields I want the search bar to function normally. The same in cases when I create a dropdown with a few exact-match options. However, for date fields, or number ranges, I want to create a dropdown that will allow users to search by ranges. I assume that in these cases I need to override the existing search functionality for JQGrid and write my own search functions.

I assume this is done with the fn searchoption. So far I've gotten as far as the below. This creates the grid and search options exactly as I'd like. However, trying to make any search clears the entire grid, presumably because it doesn't know how to deal with the special date and range dropdowns. I'd appreciate insight on how to continue. If this functionality already exists in JQGrid could you please tell me how to access it?

As an aside, I want to keep all processing local. The primary advantage of something like JQGrid is eliminating the load from multiple database requests, and eliminating the latency and overhead imposed by so many HTTP connections.

<script>
    $("#grid1").jqGrid({
        datatype:       "local",
        height:         250,
        colNames:       ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
        colModel:       [

                                {   name: 'page_name',
                                    index: 'page_name',
                                    width: 400,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'text'
                                }
                                , 
                                {   name: 'row_timestamp',
                                    index: 'row_timestamp',
                                    width: 100,
                                    sorttype: 'date',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{'0':'Any','2014-2-01_2014-2-28':'February','2014-3-01_2014-3-31':'March','2014-4-01_2014-4-30':'April'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_row_timestamp option:selected').val());
                                                    alert($('#gs_row_timestamp option:selected').text());
                                                    alert('4');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'row_id',
                                    index: 'row_id',
                                    width: 100,
                                    sorttype: 'int',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{0:'Any',2:'0 - 12000000000',3:'12000000000 - 24000000000',4:'24000000000 - 36000000000',5:'36000000000 - 48000000000',6:'48000000000 - 60000000000'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_row_id option:selected').val());
                                                    alert($('#gs_row_id option:selected').text());
                                                    alert('2');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'error_type',
                                    index: 'error_type',
                                    width: 100,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'select',
                                    searchoptions: {
                                        value:{0:'Any',2:'Application',3:'Database',4:'Expression',5:'MissingInclude'},
                                        dataEvents: [
                                            {
                                                type: 'change',
                                                fn: function(e) {
                                                    alert($('#gs_error_type option:selected').val());
                                                    alert($('#gs_error_type option:selected').text());
                                                    alert('1');
                                                }
                                            }
                                        ]
                                    }
                                }
                                , 
                                {   name: 'error_summary',
                                    index: 'error_summary',
                                    width: 500,
                                    sorttype: 'text',
                                    search:true,
                                    stype:'text'
                                }

                        ],
        multiselect:    false,
        rowNum:         25,         // Number of rows shown per page; must also change down below
        pager:          '#pager1',  
        height:         250,        
        altRows:        true,                       // Allows for styling of alt rows
        altclass:       'altRowClass',              // Create striped rows
        viewrecords:    true,                       // Show recordcount in lower right corner
        ignoreCase:     true,                       // Case insensitive searches
        multiSort:      true,
    </script>

UPDATE

It seems that using e.stopImmediatePropagation() works to prevent the grid from clearing, but I'm not sure how to control the search from there. Instead of the fn should I be looking in the line that defines the search bar to set some special searching function?

    $("#grid1").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});

UPDATE

It occurred to me that some sample data might be helpful. Here are a few records as they are being defined on the page. They are loaded once on the same page as the JQGrid, then all searching and filtering should occur locally.

        var mydata = [

                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
                        , row_timestamp:    "2014-04-29 13:25:08.528"
                        , row_id:   "135200030"
                        , error_type:   "MissingInclude"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
                        , row_timestamp:    "2014-04-29 13:24:48.575"
                        , row_id:   "135200040"
                        , error_type:   "MissingInclude"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
                        , row_timestamp:    "2014-04-25 08:46:04.428"
                        , row_id:   "135200050"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
                        , row_timestamp:    "2014-04-25 08:46:03.944"
                        , row_id:   "135200060"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Test\\jqtest.cfm"
                        , row_timestamp:    "2014-04-16 10:10:14.729"
                        , row_id:   "135200070"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
                        , row_timestamp:    "2014-04-15 16:47:51.477"
                        , row_id:   "135200080"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
                        , row_timestamp:    "2014-04-15 16:47:50.071"
                        , row_id:   "135200090"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
                        , row_timestamp:    "2014-04-15 16:42:22.18"
                        , row_id:   "135300000"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
                        , row_timestamp:    "2014-04-15 16:42:20.664"
                        , row_id:   "135300010"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:53:38.01"
                        , row_id:   "135300020"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:28:23.948"
                        , row_id:   "135300030"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 11:07:24.76"
                        , row_id:   "135300040"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
                        , row_timestamp:    "2014-04-08 10:30:13.026"
                        , row_id:   "135300050"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\CustomTag\\stored_proc.cfm"
                        , row_timestamp:    "2014-04-08 09:03:21.588"
                        , row_id:   "135300060"
                        , error_type:   "Database"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
                        , row_timestamp:    "2014-02-19 09:52:43.078"
                        , row_id:   "135300070"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }
                , 
                {
                    page_name:  "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
                        , row_timestamp:    "2014-02-19 09:46:10.906"
                        , row_id:   "135300080"
                        , error_type:   "Expression"
                        , error_summary:    "This is some sample text for example purposes.  Real data would be here."

                }

        ];
        for (var i = 0; i < mydata.length; i++)
            jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
        jQuery("#grid1").setGridParam({ rowNum: 25 }).trigger("reloadGrid");

Answer 1

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.