How do I manipulate a jqGrid's search/filters?

Question

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

I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.

I've also tried accessing the search box directly using jQuery, like this:

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

But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).

Has anyone else dealt with an issue like this?

Sarcastic

Answer 1

For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:

jQuery(document).ready(function() {
    //Initialize grid.

    //Initialize the navigation bar (#pager)

    //Hack to force creation of the search grid.
    //The filter's 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();
    });
});

Sarcastic

Thank you so much for this post. I've been trying to find a way to access the XHR URI for when the grid updates. However, I was never able to accomplish that on my localhost development box due to XHR permission issues. Your mention of "jqGrid('getGridParam', 'postData')" gave me a way to generate the URI myself. Thanks again. – Durante

Isn't there a simpler method? – Idolatrize

@Idolatrize I posted this question in hopes that someone would provide one. So far, I haven't seen one that worked. Of course, I have been away from the jqGrid scene for a while, so one may have been patched in. – Sarcastic

Answer 2

If you mean the filter toolbar, you can do this: (status is the col 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

Spivey

Hmm... Perhaps we have a version mismatch. When I try $('#<table ID>').RefreshData();, I receive a JS error (method does not exist). Either way, how would I set the search operators (equal, not equal, and so on) with this method? – Sarcastic

Answer 3

to clear inputs, selects and reset grid

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

Carpathoukraine