0

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

unknown
  • 412
  • 7
  • 20
  • It isn't clear which behavior you try to implement. Why you call `navGrid` inside of `gridComplete`? One can create navigator bar only once. All other calls will be ignored. Why you create `filterToolbar` inside of `loadComplete`? If you need to **recrate** the toolbar then you have to destroy it before creating. Why you call `triggerToolbar` inside of `loadComplete` on loading from the server. It could have sense only if you would set some filter parameters before. Is the usage of very old (3.5 years old) jqGrid 4.6 really required? – Oleg Oct 11 '17 at 15:19
  • @Oleg Thanks for your comment The grid is reloaded again and again depending on the value of a _dropdown_. But as suggested i will call `navgrid` outside the `gridcomplete` and I am initializing filter toolbar outside `loadcomplete` for the first time – unknown Oct 11 '17 at 16:05
  • It would be helpful if you create the demo (in jsfiddle, for example), which reproduce the problem. You can use Echo service of JSFiddle: `url: "/echo/json/", mtype: "POST", datatype: "json", postData: { json: JSON.stringify(serverResponse) }`, where `serverResponse` represent the server response. See http://jsfiddle.net/OlegKi/vgznxru6/1/ as an example. One need mostly to have some test data. You should move call of `navGrid` and `filterToolbar` outside of `gridComplete` and `loadComplete`. Could you explain more detailed **what is not working** currently? – Oleg Oct 11 '17 at 16:19
  • @Oleg `filtertoolbar` is not working even after putting it outside gridcomplete method When i am entering any `string` to filter the result in a particular column the results are not getting filtered – unknown Oct 11 '17 at 16:33
  • Sorry, but I can help you only if I could reproduce the problem. Could you provide the demo (or modify my demo) which demonstrates the problem? – Oleg Oct 11 '17 at 16:38
  • @Oleg I have edited my query to help you understand my problem better. I tried the same in jstfiddle and it is working fine over there http://jsfiddle.net/vgznxru6/21/. But here in my working enviornment i am getting error as `Cannot create property 'filters' on string '{"complaintDeptId":"1"}'` .I am using the version of jqgrid used by you in your jstfiddle example. Many thanks for your help in advance. – unknown Oct 12 '17 at 03:09
  • @Oleg Please let me know your views. I have a deadline of tomorrow.Thanks – unknown Oct 12 '17 at 16:06
  • One can simplify the code from your last demo, but it has no relation with your problem. I can't help you if you don't provide the demo which reproduces the problem. Your demo uses no `filters` directly. Moreover if you have some code which produce the error `Cannot create property 'filters' on string '{"complaintDeptId":"1"}'` then you should **debug** it. You need just open Developer Tools and reload the page. You will see the line which generates the error. If the error inside of free jqGrid code, then you should post me at least the line number in `jquery.jqgrid.src.js` file. – Oleg Oct 12 '17 at 16:15
  • @Oleg OK many thanks for your comment. I will post you the line number and the exact trace of error I am getting in few minutes – unknown Oct 12 '17 at 16:20
  • @Oleg `Uncaught TypeError: Cannot create property 'filters' on string '{"complaintDeptId":"3"}' at triggerToolbar (VM218 jquery.jqgrid.src.js:10172) at VM218 jquery.jqgrid.src.js:10653` **p.postData[o.sFilter] = ruleGroup** is the error line 10172 – unknown Oct 12 '17 at 16:31
  • I can only suppose that you use **wrong** `postData` value. It should be **object** and not string. There are many ways to fix `postData`, but before all could you explain what is `reqData` and why you use `postData:JSON.stringify(reqData)`? What is the interface of `url: "./getComplaintDetails"` (which data need be sent and which, in which format, will be returned)? – Oleg Oct 12 '17 at 16:42
  • @Oleg `reqData` is the `request payload` i am posting to interface `./getComplaintDetails ` which returns me the response as `list` in JSON form – unknown Oct 12 '17 at 16:54
  • What you write is very unspecific. Could you include **an example** of data, which you need to send and which will be returned. The `postData` is parameter, which type have to be **object** at least in case of usage locally. If you need to send and custom data to the server you can use `serializeGridData` callback function. – Oleg Oct 12 '17 at 16:58
  • @Oleg Many thanks your suggestion is working perfectly.I have posted one small query as comment in your `answer` to this post to clear my `understanding`.Please correct me if i am having wrong understanding thanks – unknown Oct 12 '17 at 17:30

1 Answers1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks man for your help it solved my problem. You are awesome. I would just like to clear one thing `postData` should be an object having key value pair and when we want postData to in form of `json`,`xml` or something we make use of **serializeGridData** which converts in the required form before sending `request body` to the server? – unknown Oct 12 '17 at 17:27
  • @unknown: You are welcome! `postData` will be used **in both case**: in case of pure sending of data to the server and for local grid (`datatype: "local"`, which value will be because of usage `loadonce: true` and because you want to filter the data **locally**). If you need to use local filtering (by `filterToolbar` or by Searching Dialog) then the property `filters` need be set on `postData` object. The callback `serializeGridData` in interface to communicate with the server only. It will be never used with `datatype: "local"`. – Oleg Oct 12 '17 at 17:34
  • @unknown: Look at [the line](https://github.com/free-jqgrid/jqGrid/blob/v4.6.0/js/grid.base.js#L2012) of the code of old jqGrid 4.6. It shows the only line where `serializeGridData` be used. Free jqGrid 4.15.1 contains [the line](https://github.com/free-jqgrid/jqGrid/blob/v4.15.1/js/grid.base.js#L4677) which do the same, but allows to use jQuery Event "jqGridSerializeGridData" alternatively to the callback `serializeGridData`. – Oleg Oct 12 '17 at 17:38
  • Many thanks for providing me the insight.` loadonce:true` parameter makes the data loaded from the server to change the `datatype` to `local` for local filtering ,searching and other manipulations. When we want data to be sent to server in JSON or other format we use `serializeGridData` to get `request payload` in the required format just like `searlizeArray` does in `jquery` converting form parameters in `JSON` with `name` as` key` and `value` as `value`? – unknown Oct 12 '17 at 18:15
  • @unknown: It's difficult that you explains all in words instead of posting one or more alternative examples. The data returned from `serializeGridData` will be used directly as `data` parameter of `jQuery.ajax`, but `data` parameter allows *multiple alternative formats*. There are 3 mostly typical cases supported by `data` parameter of `jQuery.ajax`: 1) string value. It's low-level way. jQuery just send the data as it be. 2) object. In the case jQuery uses [jQuery.param](http://api.jquery.com/jquery.param/) to generate the string from object. I name 3-d version if object contains **methods**. – Oleg Oct 12 '17 at 18:45
  • @unknown: If you use `postData: { test: function () { return "someValue"; } }` then `data` parameter of `jQuery.ajax` will have object format with methods. In the case `jQuery.param` **calls** such methods and uses the return value as the value of corresponding properties. It's the reason why the approach described in [the old answer](https://stackoverflow.com/a/2928819/315935) work. – Oleg Oct 12 '17 at 18:49
  • @unknown: You can use `serializeGridData: function () { return $("#form").serialize(); }` or `serializeGridData: function () { return $("#form").serializeArray(); }` or `serializeGridData: function () { return JSON.stringify($("#form").serializeArray()); }` or a lot of alternative. You need just generate the data, which can be interpreted by jQuery.ajax (or jQuery.param) and finally be interpreted (deserialized) by your server side code. – Oleg Oct 12 '17 at 18:53
  • Many thanks for your information and as you suggested I have accepted this answer and will accept answers of questions asked by me in the past – unknown Oct 13 '17 at 17:47