jqgrid 4.6 toolbar not working with loadonce set to true

Question

I am trying to implement toolbar filtering using jqgrid v4.6 but I'm not able to filter the results

   $('form[name="viewComplaintsForm"] button').click(function(e){
         e.preventDefault();
         var viewForm=$(this).parent('form');
         complaintDeptId=viewForm.find('select option:selected').val();
         complaintDeptName=viewForm.find('select option:selected').text();
         if(complaintDeptId !=0){
         var reqData={"complaintDeptId":complaintDeptId};
         if (complaintList.is(':empty')){
             complaintList.jqGrid({
                    url: "./getComplaintDetails",
                    datatype: "json",
                    mtype: "POST",
                    ajaxGridOptions: { contentType: 'application/json' },
                    postData:JSON.stringify(reqData),
                    colNames: ['ComplaintId',"ComplaintText", ""+complaintDeptName+"", "Status",'ComplaintAdded','ComplaintUpdated','userId'],
                    colModel: [
                        { name: "complaintId",hidden:true},
                        { name: "complaintText", width:700},
                        { name: "deptName", width:100},
                        { name: "comstatus", width:100 },
                        { name: "comAdded", width:200 },
                        { name: "comUpdated", width:200 },
                        { name: "userId",hidden:true },
                    ],
                    pager: "#pager",
                    rownumbers:true,
                    rowNum: 5,
                    rowList: [5, 10, 20],
                    viewsortcols:[true,'vertical',true],
                    viewrecords: true,
                    gridview: true,
                    caption: "Complaints grid",
                    loadonce:true,
                    autowidth:true,
                    shrinkToFit:true,
                    ignoreCase: true,
                    height:'auto',
                    jsonReader: {
                        repeatitems: false,
                        id: "complaintId",
                        root: function (obj) { return obj; },
                        page: function (obj) { return 1; },
                        total: function (obj) { return 1; },
                        records: function (obj) { return obj.length; }
                    },  
                     loadComplete:function(response){   
                    /*
                     if (this.p.datatype === 'json') {
                         console.log('inside');
                         setTimeout(function() {
                             console.log('inside');
                             $("#list")[0].triggerToolbar(); 
                         }, 100);
                     }*/
                    complaintList.navGrid('#pager',{add:false,edit:false,refresh:true,del:false,
                        view:true,search:true});
                 complaintList.jqGrid('filterToolbar',{searchOnEnter:false,stringResult:true,defaultSearch: "cn"});
                },
     });

     }
     else{
         complaintList.jqGrid('setGridParam',{postData:JSON.stringify(reqData),datatype:'json'}).trigger("reloadGrid");
         complaintList.jqGrid('setLabel','deptName',complaintDeptName);
     }

Here complaintList is the grid. I am getting data from the server whose type is JSON and converting into local type by using loadonce: true attribute. I want to enable client toolbar filtering

Edit to put initialization of navgrid and toolbar inside loadcomplete as grid is initialized again and again depending on the value of a paramete complaintDeptId

Answer 1

It I correctly understand your problem, then you should replace the parameter

postData:JSON.stringify(reqData)

to the following callback function

serializeGridData: function (postData) {
    return JSON.stringify(reqData);
}

It will replace the standard data, which will be sent to the server with your custom string JSON.stringify(reqData). On the other side the standard parameter postData will stay object.

You should remove postData:JSON.stringify(reqData) from parameters of setGridParam too. serializeGridData will use the value of reqData automatically.