Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 351
bpruitt-goddard Avatar asked Dec 01 '22 04:12

bpruitt-goddard


1 Answers

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'.

like image 76
Oleg Avatar answered Dec 15 '22 11:12

Oleg