How to do both Client side filtering and server side searching in a grid?

Question

Here I am struggling with a situation where in I have to have a toolbar filtering on the data that is currently loaded in the grid(client side filtering) and at the same time, I should be in a position to do a multiple search at server side. Will this be possible? Is there any solution for this? Here is my grid definition.

grid_on_facilities.jqGrid({
    url: 'OffOnFacilitiesDataJson',
    datatype: "json",
    colNames: ["id", "Orig Loc-CLLIA", "Term Loc-CLLIZ", "Fac,Equip or Cbl Name",
        "Fac or Cbl Type\/Relay Rack", "Unit/Pair", "SUBD or Cbl BP", "Frame/MDF"],
    colModel: [
        {name: 'id', index: 'id', width: 1, hidden: true, hidedlg: true, key: true,
            searchoptions: {sopt: ['eq', 'ne']}},
        {name: 'orig_loc_cllia', index: 'orig_loc_cllia', width: 350,
            hidedlg: true, editable: true, fixed: true},
        {name: 'term_loc_clliz', index: 'term_loc_clliz', align: "right",
            editable: true, width: 180, fixed: true},
        {name: 'fac_equip_or_cbl_name', index: 'fac_equip_or_cbl_name',
            align: "right", editable: true, width: 100, fixed: true}
    ],
    sortable: true,
    rowNum: 10,
    rowList: [2, 5, 10, 20],
    pager: '#pager_on_facilities',
    gridview: true,
    sortname: 'orig_loc_cllia',
    viewrecords: true,
    sortorder: 'desc',
    caption: 'OffOn facilities',
    autowidth: true,
    editurl: 'OffOnFacilitiesDataJson',
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
}).jqGrid('navGrid', '#pager',
    {edit: true, add: true, del: true, refresh: true, view: false},
    editSettings, addSettings, delSettings,
    {multipleSearch: true, jqModal: false, //overlay: false,
        onClose: function (/*$form*/) {
            // if we close the search dialog during the datapicker are opened
            // the datepicker will stay opened. To fix this we have to hide
            // the div used by datepicker
            $("div#ui-datepicker-div.ui-datepicker").hide();
        }}, {closeOnEscape: true});
grid_on_facilities.jqGrid('filterToolbar');

score 1 · Answer 1 · answered Nov 01 '12 at 11:34

I am a bit confused on this: Is there a specific need to filter data both server-side and client-side on single input? Honestly, a good solution means that the design helps perform one chain of action on one request. Client and server side filtering /searching seems a little disorienting for me.

You may provide client side filtering and give google image search like button where "onmouseover" you load more results.

But to keep things simple I might even look for placing a button/link asking user to click if they needed more result.

score 1 · Accepted Answer · edited May 23 '17 at 12:04

To achieve this, first we have to implement the solution given by Oleg in the client side sorting and server side paging

After checking that it is successfully working, go ahead with the below code,

Enable filterToolbar as

grid.jqGrid('filterToolbar',{searchOnEnter:false,beforeClear:function(){return true;}});

And enable mutiple searching in the naviagation bar with the event definitions as in

onSearch:function(){$(this).setGridParam({datatype: 'json'}); return true; } onReset:function(){$(this).setGridParam({datatype: 'json'}); return true; }

Replace onPaging event with the below code

onPaging:function(){

/*this code  is to fix the issue when we click on next page with some data in filter tool bar
 * along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event 
 * */
var data = $(this).jqGrid("getGridParam", "postData");
data._search = false;
data.filters=null;
data.page=$(this).jqGrid("getGridParam","page");
$(this)[0].clearToolbar();
//Here making _search alone false will not solve problem, we have to make search also false. like in below.
$(this).jqGrid('setGridParam', { search: false, postData:data });
var data = $(this).jqGrid("getGridParam", "postData");


/*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click 
 * on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records  
 * where in i am expecting only 3 records to be sorted out.along with this in source code comment the line $t.p.records = 0;$t.p.page=1;$t.p.lastpage=0;
 */ 

$(this).jqGrid("clearGridData");

/* this is to make the grid to fetch data from server on page click*/

$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");

}

@Oleg, could you please review it, so that i can put it as answer — venugopal, Nov 21 '12 at 14:08

score 0 · Answer 3 · answered Nov 01 '12 at 11:35

I am not sure why you nee such behavior because if you have implemented Advanced Searching on the server server side then you can just use stringResult: true option to make grid filtering (filterToolbar) produce compatibly requests to the server. In the case the server will just "don't know" whether it produce the filtered data for the Advanced Searching dialog or for the searching filter.

So my suggestion would be to change the line

grid_on_facilities.jqGrid('filterToolbar');

to

grid_on_facilities.jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn'});

The last option defaultSearch: 'cn' which I included is not really required. I personally use the setting to make default searching operations working like "contain" instead of default "begin with" operation.

How to do both Client side filtering and server side searching in a grid?

3 Answers3