CODEWITHSUNDEEP
jqgridclient-side
bpruitt-goddard
bpruitt-goddard

Reputation: 3324

jqGrid client-side searching

I would like to manually apply searching to my jqGrid via JavaScript. I have tried a guide here, but can't seem to get it completely working. In the grid setup I have a column with name 'error_column' that I would like to perform a search on looking for the string 'Test'.

Here is what I have so far:

var filter = { "field": "error_column", 'oper': 'eq', "data": 'Test' };
$("Grid2").jqGrid('setGridParam', { search: true, postData: { filters: filter} })
$("Grid2").trigger('reloadGrid');

When I click the button that this is bound to, nothing happens and it causes no errors.

EDIT Here is the code for initializing the grid:

jQuery("#Grid2").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['NewSubscriberID', 'Conflicting Subscriber ID', 'Error Field', 'Error Message'],
    colModel: [
        { name: 'new_subscriber_id', index: 'new_subscriber_id', width: 120},
        { name: 'conflicting_subscriber_id', index: 'conflicting_subscriber_id', width: 170},
        { name: 'error_column', index: 'error_column', width: 90, sorttype: "text", search: true},
        { name: 'error_type', index: 'error_type', width: 145}
    ],
    loadonce: true
    });

I bind the data to the grid using a local array.

Upvotes: 4

Views: 21271

Answers (1)

Oleg
Oleg

Reputation: 221997

You should implement search for single field in a little another way:

var grid = jQuery("#Grid2");
var postdata = grid.jqGrid('getGridParam','postData');
jQuery.extend (postdata,
               {filters:'',
                searchField: 'error_column',
                searchOper: 'eq',
                searchString: 'Test'});
grid.jqGrid('setGridParam', { search: true, postData: postdata });
grid.trigger("reloadGrid",[{page:1}]);

You can see live example here.

UPDATED: You use loadonce: true and datatype: "local" together. The value loadonce: true will be ignored in case of datatype: "local". If you do get the data from the server and use datatype: "json" or datatype: "xml", then loadonce: true will work. If you want that the searching (filtering) will be done not locally but on the server instead you should reset datatype to 'json' or 'xml' as additional option of 'setGridParam'.

Upvotes: 20

Related Questions