How can I manipulate jqGrid search / filters?

Question

I have a jqGrid with navBar that has search: true and multipleSearch: true . I would like to add a button to my user interface that will automatically add an additional rule to the search.

I tried to directly manipulate postData for the filter, but the values ​​added in this way are not displayed in the search user interface.

I also tried to access the search box directly using jQuery, for example:

 $('#fbox_list').searchFilter().add(); $('#fbox_list .sf .data input').each(function(index) { alert($(this).val()); }); 

But, besides the feeling of hacking, it only works if the user has already clicked the search button (fbox_list div is not designed at boot time).

Has anyone else dealt with such a problem?

Answer 1

For posterity, here is the hack I'm using now. The grid has the identifier list , and the pager has the identifier pager :

 jQuery(document).ready(function() { //Initialize grid. //Initialize the navigation bar (#pager) //Hack to force creation of the search grid. //The filter ID is of the form #fbox_<gridId> jQuery('#pager .ui-icon-search').click(); jQuery('#fbox_list').searchFilter().close(); //Example button events for adding/clearing the filter. jQuery("#btnAddFilter").click(function() { //Adds a filter for the first column being equal to 'filterValue'. var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters; if (postFilters) { $('#fbox_list').searchFilter().add(); } var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel'); //The index into the colModel array for the column we wish to filter. var colNum = 0; var col = colModel[colNum]; $('#fbox_list .sf .fields select').last().val(col.index).change(); $('#fbox_list .sf .data input').last().val('filterValue'); $('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change(); $('#fbox_list').searchFilter().search(); }); jQuery("#btnClearFilter").click(function() { $('#fbox_list').searchFilter().reset(); }); }); 

Answer 2

If you mean the filter toolbar, you can do this: (status is the column name - so replace "#gs_status" w / "#gs_" + your_col_name

  jQuery("#distributor_grid").jqGrid('showCol',['status']); jQuery(".ui-search-toolbar #gs_status") .val('ALL') ; $('#distributor_grid').RefreshData(); // triggers toolbar 

Answer 3

to clear inputs, select and reset the grid

 $("td#refresh_navGrid").click();