Question

I developed a Jqgrid to display database and now i need to add Filtertoolbar in it which will filter the record on selecting values from dropdown menu …

Below is my code for Jqgrid..

$(function () {
    $("#UsersGrid").jqGrid({
        url: 'getGriddahico.ashx',
        datatype: 'json',
        height: 250,
        colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID'],
        colModel: [
                { name: 'UserID', index: 'UserID', width: 100, sortable: true },
                { name: 'UserName', width: 100, sortable: true},
                { name: 'FirstName', width: 100, sortable: true },
                { name: 'MiddleName', width: 100, sortable: true },
                { name: 'LastName', width: 100, sortable: true },
                { name: 'EmailID', width: 150, sortable: true }
            ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#UsersGridPager',
        sortname: 'UserID',
        viewrecords: true,
        sortorder: 'asc',
        autowidth: true,
        toppager: true,
        footerrow: true,


    });

    $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false, search: false });


});

Answer 1

Client side it is easy:
You can mark columns as searchable etc via the search: true, or have the filter button as part of your pager. You will find numerous examples of both on SO. I highly reccomend you use a browser like Firefox with Firebug or Chrome so you can see what is being sent to your server control from the client in regards to filtering.

Server side you should look at Oleg’s answer at
ASP.NET MVC 2.0 Implementation of searching in jqgrid where you will see the Filters helper class, and how you can implement dynamic filtering of your data based on the jqGrid’s controls. I followed and used this to implement server side filtering to pass data to my grid.

Good luck…it’s a bit of setting up but it will give you a very powerful client side tool when you are done.