CODEWITHSUNDEEP
javascriptsearchfilterjqgrid
Vishweshwar Kapse
Vishweshwar Kapse

Reputation: 939

Adding filter to each column of jqgrid

I have a jqgrid that shows details of employees and i would like to add a filter in each column using which a user can type in company name and the grid shows all the employee rows that matches that filter in the grid.

Googled alot but no success. Any refrence examples/link will help.

Upvotes: 17

Views: 36541

Answers (1)

CharlesMighty
CharlesMighty

Reputation: 572

You should use filterToolbar option when you type the name of test case in the text box you data will fiter through the records, here is the code and working example demo

 var mydata = [
    {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
    {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"},

];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
rowList: [10,20,30],
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   colModel:[
       {name:'id',index:'id', width:60, sorttype:"int"},
       {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
       {name:'name',index:'name', width:100},
       {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
       {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
       {name:'total',index:'total', width:80,align:"right",sorttype:"float"},        
       {name:'note',index:'note', width:150, sortable:false}        
   ],
   pager: "#pager",
   viewrecords: true,
   autowidth: true,
   height: 'auto',
   caption: "Test Grid"
});

jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });



<table id="list"></table>
<div id="pager"></div>

Upvotes: 23

Related Questions