How to filter the jqGrid data NOT using the built in search/filter box

I want users to be able to filter grid data without using the intrinsic search box.

I have created two input fields for date (from and to) and now need to tell the grid to adopt this as its filter and then to request new data.

Forging a server request for grid data (bypassing the grid) and setting the grid's data to be the response data wont work - because as soon as the user tries to re-order the results or change the page etc. the grid will request new data from the server using a blank filter.

I cant seem to find grid API to achieve this - does anyone have any ideas? Thanks.

Solution 1:

You problem can be very easy solved with respect of postData parameter including functions and trigger('reloadGrid'). I try explain the idea more detailed.

Let us use mtype: "GET". The only thing which standard search/filter box do after displaying the interface is appending of some additional parameters to the url, sending to server and reloading the grid data. If you have your own interface for searching/filtering (some select controls or checkboxes, for example) you should just append your url yourself and reload the grid with respect of trigger('reloadGrid'). For resetting of the information in the grid you can choose any way which you prefer. For example, you can include in the select controls which you have an option like "no filtering".

To be more exact your code should looks like the code from the answer how to reload jqgrid in asp.net mvc when i change dropdownlist:

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

If user change selected option in select box with id=StateId or another select box with id=CityId (with mouse or keyboard), the function myReload will be called, which just force reloading of data in jqGrid. During corresponding $.ajax request, which jqGrid do for us, the value from postData parameter will be forwarded to $.ajax as data parameter. If some from properties of data are functions, these function will be called by $.ajax. So the actual data from select boxes will be loaded and all the data will be appended to the data sent to the server. You need only implement reading of this parameters in your server part.

So the data from the postData parameter will be appended to the url (symbols '?' and '&' will be added automatically and all special symbols like blanks will be also encoded as usual). The advantages of the usage of postData is:

1. usage of functions inside postData parameter allows you to load actual values from all used controls to the moment of reloading;
2. Your code stay have very clear structure.
3. All works fine not only with HTTP GET requests, but with HTTP POST also;

If you use some "no filtering" or "all" entries in the select box StateId, you can modify the function which calculate the value of StateId parameter which should appended to the server url from

StateId: function() { return jQuery("#StateId option:selected").val(); }

to something like following:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

On the server side you should makes no filtering for StateId if you receive an empty value as a parameter.

Optionally you can use myGrid.setCaption('A text'); to change a grid title. This allow user to see more clear, that the data in grid are filtered with some criteria.

Solution 2:

I had the same requirements, and (with Oleg's help) came up with this:

Basically, the user starts typing in the "Employee name" textbox, and immediately the results get shown in the jqGrid.

Details of how I implemented this are here:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Note that I specifically load all of the JSON data for my jqGrid in advance, and that for large data sets, there is a delay when running this code on an iPhone/Android device as you type each character.

But, for desktop web apps, it's a great solution, and makes jqGrid much friendler for the user.