Adding filter to each column of jqgrid

Question

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.

Answer 1

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>