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

11,231

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();
    });
});
Share:
11,231
AaronSieb
Author by

AaronSieb

:)

Updated on September 28, 2022

Comments

  • AaronSieb
    AaronSieb over 1 year

    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?