Question

I have a jqgrid containing some data to filter. I’d like to define a combo box with some pre-defined filter sets / templates.
If a user selects an item of the combobox, the grid should automatically apply combined filters. Preferably, the combo box should be integrated into a toolbar or jqGrid’s pager, but also in the html page would be fine.

For example:

         COMBO BOX
       Item templates       filter parameters
        ___________
       |Expired    |        << Timeout = true
       |Last Week  |        << OpenDate between 02/13/2012 and 02/16/2012
       |Last Month |        << OpenDate between 01/01/2012 and 02/16/2012
       |.........  |        ......

Thanks in advance for your help

Answer 1

jqGrid supports Searching Templates in the Advance Searching (see “Searching”/ “Search Templates” in the official jqGrid demo), but there are currently no searching templates support in the Toolbar Filtering.

I find your question very interesting. In the old question I described how one can use generic external filters to send additional information to the server. The way can be good in case of remote data, but it can’t be used directly in the local grid or in the grid with the loadonce: true option.

So I created the demo which shows how the filter templates can be implemented in Toolbar Filtering and how to integrated the template in the jqGrid. I used toolbar: [true, “top”] to have additional empty toolbar above the column headers:

In the implementation I used the refreshSerchingToolbar function which I suggested originally here. It’s important to understand, that the refreshSerchingToolbar function fill in the filter toolbar only the information which can be exactly represented by the filter. For example the filter for “Closed” rows can be represented in the filter toolbar (see the picture above), but the interval of dates “Last Week” and “Last Month” con’t. In the cases the data in the grid will be filtered, but the corresponding fields of the filter toolbar stay empty.

The most important part of the code of the demo you can find below

var $grid = $("#list"),
    initDate = function (elem) {
        $(elem).datepicker({
            dateFormat: 'dd-M-yy',
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    },
    numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true/*,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }*/},
    dateTemplate = {width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, editable: true, datefmt: 'd-M-Y',
            editoptions: { dataInit: initDate },
            searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDate }},
    yesNoTemplate = {align: 'center', editable: true, formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'No'},
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' }},
    myDefaultSearch = 'cn',
    getColumnIndex = function (columnIndex) {
        var cm = this.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
        for (i = 0; i < l; i++) {
            if ((cm[i].index || cm[i].name) === columnIndex) {
                return i; // return the colModel index
            }
        }
        return -1;
    },
    refreshSerchingToolbar = function (myDefaultSearch) {
        var filters, i, l, rules, rule, iCol, cmi, control, tagName,
            $this = $(this),
            postData = $this.jqGrid('getGridParam', 'postData'),
            cm = $this.jqGrid('getGridParam', 'colModel');

        for (i = 0, l = cm.length; i < l; i++) {
            control = $("#gs_" + $.jgrid.jqID(cm[i].name));
            if (control.length > 0) {
                tagName = control[0].tagName.toUpperCase();
                if (tagName === "SELECT") { // && cmi.stype === "select"
                    control.find("option[value='']")
                        .attr('selected', 'selected');
                } else if (tagName === "INPUT") {
                    control.val('');
                }
            }
        }

        if (typeof (postData.filters) === "string" &&
                typeof (this.ftoolbar) === "boolean" && this.ftoolbar) {

            filters = $.parseJSON(postData.filters);
            if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
                // only in case of advance searching without grouping we import filters in the
                // searching toolbar
                rules = filters.rules;
                for (i = 0, l = rules.length; i < l; i++) {
                    rule = rules[i];
                    iCol = getColumnIndex.call($this, rule.field);
                    if (iCol >= 0) {
                        cmi = cm[iCol];
                        control = $("#gs_" + $.jgrid.jqID(cmi.name));
                        if (control.length > 0 &&
                                (((typeof (cmi.searchoptions) === "undefined" ||
                                typeof (cmi.searchoptions.sopt) === "undefined")
                                && rule.op === myDefaultSearch) ||
                                  (typeof (cmi.searchoptions) === "object" &&
                                      $.isArray(cmi.searchoptions.sopt) &&
                                      cmi.searchoptions.sopt.length > 0 &&
                                      cmi.searchoptions.sopt[0] === rule.op))) {
                            tagName = control[0].tagName.toUpperCase();
                            if (tagName === "SELECT") { // && cmi.stype === "select"
                                control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
                                    .attr('selected', 'selected');
                            } else if (tagName === "INPUT") {
                                control.val(rule.data);
                            }
                        }
                    }
                }
            }
        }
    },
    templateClosed = {
        groupOp: "AND",
        rules: [
            { field: "closed", op: "eq", data: "true" }
        ]
    },
    templateLastWeek = {
        groupOp: "AND",
        rules: [
            { field: "invdate", op: "ge", "data": "13-Feb-2012" },
            { field: "invdate", op: "le", "data": "16-Feb-2012"}
        ]
    },
    templateLastMonth = {
        groupOp: "AND",
        rules: [
            { field: "invdate", op: "ge", "data": "16-Jan-2012" },
            { field: "invdate", op: "le", "data": "16-Feb-2012"}
        ]
    },
    myFilterTemplateLabel = 'Filter by Template:&nbsp;',
    myFilterTemplateNames = ['Closed', 'Last Week', 'Last Month'],
    myFilterTemplates = [templateClosed, templateLastWeek, templateLastMonth],
    iTemplate,
    cTemplates = myFilterTemplateNames.length,
    templateOptions = '',
    reloadWithNewFilterTemplate = function () {
        var iTemplate = parseInt($('#filterTemplates').val(), 10),
            postData = $grid.jqGrid('getGridParam', 'postData');
        if (isNaN(iTemplate)) {
            $grid.jqGrid('setGridParam', {search: false});
        } else if (iTemplate >= 0) {
            $.extend(postData, {
                filters: JSON.stringify(myFilterTemplates[iTemplate])
            });
            $grid.jqGrid('setGridParam', {search: true});
        }
        $grid.trigger('reloadGrid', [{current: true, page: 1}]);
    };

$grid.jqGrid({
    ...
    toolbar: [true, "top"],
    loadComplete: function () {
        var $this = $(this);

        if (typeof (this.ftoolbar) !== "boolean") {
            // create toolbar if needed
            $this.jqGrid('filterToolbar',
                {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
        }
        refreshSerchingToolbar.call(this, myDefaultSearch);
    }
});
$.extend($.jgrid.search, {
    multipleSearch: true,
    multipleGroup: true,
    recreateFilter: true,
    closeOnEscape: true,
    closeAfterSearch: true,
    overlay: 0,
    tmplLabel: myFilterTemplateLabel,
    tmplNames: myFilterTemplateNames,
    tmplFilters: myFilterTemplates
});
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false});
for (iTemplate = 0; iTemplate < cTemplates; iTemplate++) {
    templateOptions += '<option value="' + iTemplate + '">' +
        myFilterTemplateNames[iTemplate] + '</option>';
}
$('#t_' + $.jgrid.jqID($grid[0].id)).append('<label for="filterTemplates">'+
    myFilterTemplateLabel + '</label>' +
    '<select id="filterTemplates"><option value="">Not filtered</option>' +
    templateOptions + '</select>');
$('#filterTemplates').change(reloadWithNewFilterTemplate).keyup(function (e) {
    // some web browsers like Google Chrome don't fire "change" event
    // if the select will be "scrolled" by keybord. Moreover some browsers
    // like Internet Explorer don't change the select option on pressing
    // of LEFT or RIGHT key. Another web browsers like Google Chrome do this.
    // We make refrech of the grid in any from the cases. If needed one
    // could modify the code to reduce unnneded reloading of the grid,
    // but for the demo with a few local rows it's such optimization
    // isn't really needed
    var keyCode = e.keyCode || e.which;

    if (keyCode === $.ui.keyCode.PAGE_UP || keyCode === $.ui.keyCode.PAGE_DOWN ||
            keyCode === $.ui.keyCode.END || keyCode === $.ui.keyCode.HOME ||
            keyCode === $.ui.keyCode.UP || keyCode === $.ui.keyCode.DOWN ||
            keyCode === $.ui.keyCode.LEFT || keyCode === $.ui.keyCode.RIGHT) {

        reloadWithNewFilterTemplate();
    }
});