jQGrid - Filter like excel spreadsheet

I am using jQGrid 3.8. I am using datatype:"local". I have not used any server side interaction so far. My grid has inline editing option. I can add new row, add cloned row, delete row(s),pagination, sorting.

I would like to add filter option as well. Currently I have filtertoolbar option. As you could see from the script below, for three columns (Details of purchaser, Property Type and Sale Ind) filter search "equal" option has been enabled in the form of drop down.

Problem:I would like to get drop down mode of filer for text boxes too. But since I have dynamic row addition and deletion, I couldn't find out a way to dynamically manage the drop down like filter.

Here's what I have so far:

<script type="text/javascript">
var lastsel3;
var defaultCategory = "All";
var pptyType = ["Bungalow/Detached", "Semi-Detached", "Terrace","All","Apartment","Condominium","Executive Condominium","DBSS"];
var pptyTypeStr = ":All;0:Apartment;1:Bungalow Or Detached;2:Condominium;3:DBSS;4:Executive Condominium;5:Semi-Detached;6:Terrace";
var saleIndVal = ["Sold", "Aborted", "Launched","All","To Be Launched"];
var saleIndStr = ":All;0:Launched;1:Sold;2:Aborted;3:To Be Launched";
var purchaserDtail = ["Singaporean", "Permanent Resident", "Company","Foreigner","All"];
var purchaserDtailStr = ":All;0:Singaporean;1:Permanent Resident;2:Company;3:Foreigner";
var grid = jQuery("#list4").jqGrid({
datatype: "local",
height: 400,
   colNames:['S No','Block No','Floor No', 'Unit No', 'Street Name','Area','Least Price','Price','Least Price($psf)','Price ($psf)','Property Type','Details of Purchaser','Sale Indicator','Launch Date','Date of Sale','Date Aborted','Interested Party Transaction','Unit Status'],
    colModel:[
           {name:'id',index:'id', width:40,align:"center", sorttype:"int"},
           {name:'blkNo',index:'blkNo', width:40, align:"center",sorttype:"integer",editable:true},
           {name:'floorNo',index:'floorNo', width:30,align:"center", sorttype:"int",sortable:true,editable:true,editrules:{number:true}},          
           {name:'unitNo',index:'unitNo', width:40,align:"center",editable:true,onblur: 'submit'},
           {name:'streetName',index:'streetName', width:60, align:"center",sorttype:"text",editable:true},   
           {name:'area',index:'area', width:50, align:"center",sorttype:"integer",editable:true,editrules:{number:true}},
           {name:'leastPrice',index:'leastPrice', width:60,align:"center",sorttype:"float",editable:true,editrules:{number:true}},
           {name:'price',index:'price', width:60,align:"center",sorttype:"float",editable:true,editrules:{number:true}},
           {name:'leastPricePSF',index:'leastPricePSF', width:40,align:"center",sorttype:"integer",editable:false},
           {name:'pricePSF',index:'pricePSF', width:50,align:"center",sorttype:"integer",editable:false},
          /* {name:'propertyType',index:'pptyType', align:"center",width:90,sortable:false,editable:true,
              edittype:"select",editoptions:{value:"Bungalow:Bungalow/Detached;Semi:Semi-Detached;Terrace:Terrace;Apartment:Apartment;Condominium:Condominium;Ex:Executive Condominium;DBSS:DBSS"}},    */
        {name:'propertyType',index:'propertyType', align:"center",width:80,formatter:'select',stype: 'select',sortable:true,
editable:true,edittype:"select",editoptions:{value:pptyTypeStr}
              },              
              {name:'purchaserDtail',index:'purchaserDtail', width:80,align:"center",formatter:'select',stype: 'select',editable:true,sortable:true,
               searchoptions:{
                          sopt: ['eq'],
                          dataInit:function(el){
                               var defOption = $("option:contains("+defaultCategory+")",el);
                               defOption.attr("selected", "selected");
                               setTimeout(function(){
                                   $(el).trigger('change');
                               },500);
                          }
                      },
  开发者_StackOverflow                    sorttype: function(cell, obj) {
                          return purchaserDtail[cell];
                      },edittype:"select",editoptions:{value:purchaserDtailStr}
              },
              {name:'saleInd',index:'saleInd', width:50,align:"center", sortable:true,formatter:'select',stype: 'select',editable:true,
              searchoptions:{
                          sopt: ['eq'],
                          dataInit:function(el){
                               var defOption = $("option:contains("+defaultCategory+")",el);
                               defOption.attr("selected", "selected");
                               setTimeout(function(){
                                   $(el).trigger('change');
                               },500);
                          }
                      },
                      sorttype: function(cell, obj) {
                          return saleIndVal[cell];
                      },edittype:"select",editoptions:{value:saleIndStr}},
               {name:'dateofLaunch',index:'dateofLaunch',align:"center", width:75, sorttype:"date",sortable:true,editable:true},    
              {name:'dateofSale',index:'dateofSale',align:"center", width:75, sorttype:"date",sortable:true,editable:true}, 
              {name:'dateAborted',index:'dateAborted',align:"center", width:75, sorttype:"date",sortable:true,editable:true},        
           {name:'interested',index:'interested', align:"center",width:70, sortable:true,editable:true,edittype:"select",editoptions:{value:"Y:yes;N:No"}},
           {name:'unitStatus',index:'unitStatus', align:"center",width:40, sortable:true,editable:false}
    ],  
        editurl: "clientArray",
        multiselect: true,
        pagination:true,
        page: 1,
        pager: '#search',
        //pager:jQuery('#pager1'), 
        viewsortcols : [true,'vertical',true],
        rowNum: 5,
        rowList: [5, 10,20,30,40,50],
        sortname: 'id',   
        sortorder: 'asc',
        sortable:true,
        viewrecords: true,
        page: 1,
        loadonce: true,  
        totalpages: 3,   
        totalrecords:15,     
        showpage:true,   
    //  imgpath: "./themes/redmond/images",         
        caption: "Details of individual launch units",
        headertitles: true,
        cellEdit: true,
        cellsubmit: 'clientArray',
        afterEditCell: function(rowid,name,val,iRow,iCol) { 

        var datePick = false;
        if(name == 'dateofLaunch') 
            {   
                jQuery("#"+rowid+"_dateofLaunch","#list4").datepicker({dateFormat:"yy-mm-dd"});
                $("#" + rowid + "_dateofLaunch").get(0).focus();
                datePick = true;
            }

            if(name=='dateofSale') 
            { 
                jQuery("#"+iRow+"_dateofSale","#list4").datepicker({dateFormat:"yy-mm-dd"}); 
                $("#" + rowid + "_dateofSale").get(0).focus();
                datePick = true;
            }
            if(name=='dateAborted') 
            { 
                jQuery("#"+iRow+"_dateAborted","#list4").datepicker({dateFormat:"yy-mm-dd"}); 
                $("#" + rowid + "_dateAborted").get(0).focus();
                datePick = true;
            }
            if(!datePick)
            {
                //This code saves the state of the box when focus is lost in a pretty horrible
                //way, may be they will add support for this in the future
                e = jQuery.Event("keydown");                
                e.keyCode = $.ui.keyCode.ENTER;
                edit = $(".edit-cell > *"); 
                $('.ui-jqgrid-sortable').click(function()
                {
                    edit.trigger(e);
                });
            }       
        },      
        afterSaveCell : function(rowid,name,val,iRow,iCol) 
        { 
            var resetFirstRow = jQuery("#list4").getRowData( 1 );
            jQuery("#list4").setRowData( 1, resetFirstRow );
            var areaVal = '';
            var pricePerSq = '';
            var leastPrice = '';
            if(name == 'price') 
            { 
                pricePerSq = jQuery("#list4").getCell(rowid,iCol+1); 
                areaVal = jQuery("#list4").getCell(rowid,iCol-2); 
                jQuery("#list4").setRowData(rowid,{pricePSF:parseFloat(val)/parseFloat(areaVal)}); 
            }
            if(name == 'leastPrice')
            {
                leastPrice = jQuery("#list4").getCell(rowid,iCol+1); 
                areaVal = jQuery("#list4").getCell(rowid,iCol-1); 
                jQuery("#list4").setRowData(rowid,{leastPricePSF:parseFloat(val)/parseFloat(areaVal)}); 
            }
            if(name == 'area') 
            { 
                areaVal = jQuery("#list4").getCell(rowid,iCol); 
                pricePerSq = jQuery("#list4").getCell(rowid,iCol+2); 
                leastPrice = jQuery("#list4").getCell(rowid,iCol+1);                
                if(pricePerSq != '')
                {
                    jQuery("#list4").setRowData(rowid,{pricePSF:parseFloat(pricePerSq)/parseFloat(areaVal)}); 
                }
                if(leastPrice != '')
                {
                    jQuery("#list4").setRowData(rowid,{leastPricePSF:parseFloat(leastPrice)/parseFloat(areaVal)}); 
                }
            }           
        }
});
grid.setLabel ('id','','',{'title':'my custom tooltip for column header'});
grid.setLabel ('blkNo','','',{'title':'Block No for the unit'});

jQuery("#list4").hideCol("id");

var mydata = [      
        {id:"1",blkNo:"",floorNo:"",unitNo:"",area:"",streetName:"",interested:"",price:"",pricePSF:"",dateofLaunch:"",dateofSale:"",dateAborted:"",unitStatus:"New",saleInd:0,leastPrice:"",leastPricePSF:""},
        {id:"2",blkNo:"",floorNo:"",unitNo:"",area:"",streetName:"",interested:"",price:"",pricePSF:"",dateofLaunch:"",dateofSale:"",dateAborted:"",unitStatus:"New",saleInd:0,leastPrice:"",leastPricePSF:""},
        {id:"3",blkNo:"101",floorNo:"04",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
        {id:"4",blkNo:"101",floorNo:"04",unitNo:"185",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
        {id:"5",blkNo:"101",floorNo:"04",unitNo:"186",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
        {id:"6",blkNo:"101",floorNo:"04",unitNo:"187",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:3,leastPrice:"200000",leastPricePSF:"200"},
        {id:"7",blkNo:"101",floorNo:"04",unitNo:"188",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"",dateAborted:"",unitStatus:"Submitted",saleInd:0,propertyType:3,leastPrice:"200000",leastPricePSF:"200"},
        {id:"8",blkNo:"101",floorNo:"04",unitNo:"189",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
        {id:"9",blkNo:"101",floorNo:"04",unitNo:"190",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
        {id:"10",blkNo:"101",floorNo:"05",unitNo:"191",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:1,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
        {id:"11",blkNo:"101",floorNo:"05",unitNo:"192",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:1,purchaserDtail:2,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
        {id:"12",blkNo:"101",floorNo:"05",unitNo:"193",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:2,propertyType:2,leastPrice:"200000",leastPricePSF:"200"},
        {id:"13",blkNo:"102",floorNo:"01",unitNo:"183",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:1,propertyType:1,leastPrice:"200000",leastPricePSF:"200"},
        {id:"14",blkNo:"102",floorNo:"02",unitNo:"184",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:0,propertyType:0,leastPrice:"200000",leastPricePSF:"200"},
        {id:"15",blkNo:"103",floorNo:"03",unitNo:"183",area:"1000",streetName:"Peck Seah Street",interested:"Yes",price:"3000000",pricePSF:"3000",dateofLaunch:"2011-05-05",dateofSale:"2011-05-10",dateAborted:"2011-05-15",unitStatus:"Submitted",saleInd:2,purchaserDtail:0,propertyType:1,leastPrice:"200000",leastPricePSF:"200"}


        ];
var recordCount = jQuery("#list4").getGridParam("reccount");
if(recordCount == 0)
{
for(i = 0; i < mydata.length; i++)
{
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);    
}
}else{
var resetFirstRow = jQuery("#list4").getRowData( 1 );
    jQuery("#list4").setRowData( 1, resetFirstRow );
}

jQuery("#list4").jqGrid('navGrid','#search',{del:false,add:false,edit:false,search:false},
{closeOnEscape: true, multipleSearch: true, 
         closeAfterSearch: true }, // search options
   {}); 
jQuery("#list4").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#list4").setGridWidth(978);


function pickdates(id){
    jQuery("#"+id+"_dateofLaunch","#list4").datepicker({dateFormat:"yy-mm-dd", constrainInput: true});
}

</script>