Pages

Wednesday, August 22, 2012

jqGrid - External/Custom Filters (not the filtertoolbar)

So, I had the need to filter an jqgrid data, but without using the in-built filtertoolbar (btw is really good...).

To achieve this objective, we have to make the reload of the grid with the new filters... manually...

Now, to filter we need to add/alter the postdata.filters.rules object of the grid. With the search I made, I came up with this function that, perhaps, can help someone...

function OnChangeGridSelect (fieldName, searchText) {    
    var filterObj = {"field":fieldName,"op":"eq","data":searchText};
    var grid = jQuery("#GridID");
    var postdata = grid.jqGrid('getGridParam', 'postData');

    if(postdata != undefined 
       && postdata.filters != undefined 
       && postdata.filters.rules != undefined) 
    {
        //Remove if current field exists
        postdata.filters.rules = $.grep(postdata.filters.rules, function(value) {
            if(value.field != fieldName)
                return value;
        });

        //Add new filter
        postdata.filters.rules.push(filterObj);
    }
    else 
    {
        $.extend(postdata, {
            filters:  { 
                "groupOp":"AND",
                "rules":[ filterObj ] 
            }
        });
    }

    grid.jqGrid('setGridParam', { search: true, postData: postdata });
    grid.trigger("reloadGrid", [{ page: 1}]);
}

explaining the parameters of the above function:
- fieldName is the internal name of the collumn we want to filter with
- searchText is the text from you want to filter the grid.

In my example, the function is called inside combos's events with the necessary parameters.

Approximate result...

















If you don not know the jqgrid here are a couple of links to get into:
http://trirand.com/blog/jqgrid/jqgrid.html
http://www.trirand.com/jqgridwiki/doku.php

Cheers


References:
http://stackoverflow.com/questions/4492963/jqgrid-client-side-searching
http://stackoverflow.com/questions/5749723/jqgrid-filtering-records
http://www.codeproject.com/Articles/58357/Using-jqGrid-s-search-toolbar-with-multiple-filter#pre4
http://stackoverflow.com/questions/2674471/add-own-search-parameter-in-jqgrid-in-asp-net-mvc#answer-2679599

4 comments:

  1. hi man you can share your code complete ..i have problems please i need it :)

    ReplyDelete
  2. Hi There!

    The only thing is missing here is the jqgrid code. Here's a sample:

    jQuery("#gridID").jqGrid({
    datatype: "local",
    data: _gridDataArray,
    colNames: ['ColDispName1', 'ColDispName2', 'ColDispName3'],
    colModel: [
    { name: 'ColName1', index: 'ColName1', sorttype: 'text', width: 100, resizable: false, sortable: false },
    { name: 'ColName2', index: 'ColName2', sorttype: 'text', width: 100, resizable: false, sortable: false },
    { name: 'ColName3', index: 'ColName3', sorttype: 'text', width: 100, resizable: false, sortable: false }
    ],
    rowNum: 20,
    pager: '#DashboardGridPager',
    height: "100%",
    width: 718,
    sortname: 'NrImoveis',
    viewrecords: false,
    sortorder: "desc",
    search: true
    });


    Be aware for colModel! Maybe you have to insert the ID's collumns hidden to work! the param "fieldName" should be equal to name/index of colModel.

    Cheers!

    ReplyDelete
  3. Can anyone please tell me the solution for my question:
    I have implemented jqgid in which one column is of Date.
    I want to filter data from two input textbox, in which dates are inputed.
    I want only those data in jqgrid whom dates are in between both textbox's dates.
    I guess i have to write two filters. But i'm not sure how to implement it.
    Can anyone provide me demo and code?

    ReplyDelete
    Replies
    1. Hello!

      Take a look at this link:

      http://stackoverflow.com/questions/9146610/jqgrid-searchbox-greater-than-and-less-than-are-missing

      Cheers

      Delete