Question

It seems there have been a few questions here regarding this subject, and they have some great answers, but it seems that my case is a little different. I need to filter the records displayed in a jqGrid, but entirely client-side.

For a number of reasons, the best way for me to populate my grid is with an array that’s emitted directly into the JavaScript on the page. The grid itself doesn’t interact with the server at all. I have some custom AJAX happening in various grid events, but that’s it. (Basically, I’m integrating this with an existing set of available services which can’t change significantly.)

What I’m looking to do is filter the grid based on a simple text input and button. My page has the text input, the button, and a table (which becomes the grid on document ready). I’d like to bind to the click event of the button (normal jQuery event binding, nothing special) and use the value from the text input as a display filter on the jqGrid.

By “filter” I mean to display only the records which contain a match (in any field) for the text in the input. Then, to display all records, just empty the input and click the button again. Additionally, the grid is multi-select and the selections need to persist through filtering. I just need to be able to hide the rows which don’t match what’s in the input.

Is this possible?

Answer 1

To filter local grid you should only fill filters property of the postData parameter of jqGrid and set additionally search:true.

To save selection of the grid you can use reloadGrid with additional parameter [{page:1,current:true}] (see here).

The corresponding code can be the following

$("#search").click(function() {
    var searchFiler = $("#filter").val(), grid = $("#list"), f;

    if (searchFiler.length === 0) {
        grid[0].p.search = false;
        $.extend(grid[0].p.postData,{filters:""});
    }
    f = {groupOp:"OR",rules:[]};
    f.rules.push({field:"name",op:"cn",data:searchFiler});
    f.rules.push({field:"note",op:"cn",data:searchFiler});
    grid[0].p.search = true;
    $.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
    grid.trigger("reloadGrid",[{page:1,current:true}]);
});

I made the demo for you which filter for two columns ‘Client’ (‘name’) and ‘Notes’ (‘note’) you can extend the code to search in all columns which you need.

Depend on what you exactly mean with the saving row selection you can need to save the current selection from the selarrrow in a variable and restore the selected rows with respect of setSelection method.