Question

I’m using jqGrid 4.2 with the filterToolbar, which works great. I’d like to add some type of custom search to query (server-side) fields that are not part of the colModel.

Prior to 4.0 I would have used filterGrid along the lines of this:

$('#keyword').jqGrid('filterGrid', '#ticket-grid',
    {
       gridModel: false, 
       filterModel: [
            { label: 'Keyword', name: 'keyword', stype: 'text'},
            { label: 'Inclued Closed?',name : 'includeClosed', stype: 'checkbox'}
       ]
     });

I understand that this is no longer supported, and an stype: 'checkbox' doesn’t work anyway.

How do I do this with the new search module/mechanism?

Answer 1

If I understand you correct you have already on the page, for example above the grid, some controls (text input, selects, chechboxes) which allow the user to define additional criteria of the results which the user want see in the grid. In the case you can use postData with methods (functions) in the way described in the old answer.

If any kind of grid refreshing: request to filter the data from the searching toolbar, changing of the page or the page size, changing of sorting and so on will always follow to the Ajax request to the server. In the case the properties from postData option of jqGrid will be added like other standard parameters (sidx, sord, page, …). If one from the properties of the postData is defined as function (if a method of postData) then the function will be called to construct the parameter which will be sent to the server. So the current information from you custom searching controls (text input, selects, chechboxes) will be send to the server. In the way you need only use the parameters on the backend to filter the results.

So you have to define fields yourself. For example the text input with id=”keyword-input” and checkbos with id=”includeClosed” and then use postData in about the following form:

$('#keyword').jqGrid(
    // ... other jqGrid options
    postData: {
        keyword: function () { return $('#keyword-input').val(); },
        includeClosed: function () { return $('#includeClosed')is(':checked'); },
    }
});