Trigger search for jqgrid filter on every revisit of page

Question

Need to save filter criteria.I have those values in filter from my session but using them to TRIGGER SEARCH using jqGrid API is not seeming possible.Need to know exact function or set of steps needed.

var options = {
        url:inboxGridUrl,
        datatype: 'json',
        mtype: 'GET',
        colNames:['EvaluationId','Policy', 'Task','Status','Condition','Due Date','Eff Date','Agency Name','Agency No','Producer Name','Producer No','Review Start','Location','Task Group'],
        colModel :[ 
                   {name:'uwEvaluationId', label: 'EvaluationId',formatter:'integer',editable: true,hidden:true, frozen : true,editoptions: {disabled: true, size:5}},
                   {name:'policyNum',label: 'Policy',width: 125,editable: true,formatter:formatPolicyLink,editrules: {required: true}},
                   {name:'transactionType',label: 'Task',width: 40,editable: true,editrules: {required: true}},
                   {name:'uwDecision',label: 'Status',width: 50,editable: true,edittype: 'select',editrules: {edithidden:true},editoptions: {required: true}},
                   {name:'taskCondition',label: 'Condition',align: 'left',width: 60,editable: true,
                       editrules: {required: true, integer: true},editoptions: {size:5, maxlength: 4}},
                   {name:'dueDate',label: 'Due Date',align: 'left',width: 70,editable: true,edittype: 'select',editoptions: {required: true}},
                   {name:'policyEffectiveDate',label: 'Eff Date',width: 70,editable: true,edittype: 'select',editrules: {required: true}},
                   {name:'agencyName',label: 'Agency Name',editable: true,width: 120,edittype: 'select',editrules: {required: true}},
                   {name:'agentCode',label: 'Agency No.',editable: true,width: 75,edittype: 'select',editrules: {required: true}},
                   {name:'producerName',label: 'Producer Name',width: 120,editable: true,edittype: 'select',editrules: {required: true}},
                   {name:'producerCode',label: 'Producer No',width: 75,editable: true,edittype: 'select',editrules: {required: true}},
                   {name:'startDate',label: 'Review Start',width: 80,editable: true,edittype: 'select',editrules: {required: true}},
                   {name:'locationCd',label: 'Location',width: 70,editable: true,edittype: 'select',editrules: {required: true}},
                   {name:'groupName',label: 'Task Group',width: 75,editable: true,edittype: 'select',editrules: {required: true}},
                 ],  


        prmNames: {rows: 'max', search: null},
        rowNum:20000,
        height: 'auto',

        sortname: 'id',
        sortable: true,
        forceFit : true,
        repeatitems:true,
        sortorder: 'desc',
        loadonce:true,
        shrinktofit:true,
        datatype: 'json',

        recreateForm:true,
        multipleGroup:true,
        multipleSearch:true,
        multiselect: true,

        gridview: true,
        hidegrid: false,
        viewrecords: true,      
        gridview: true,            
        refreshtitle: "Reload Tasks",
        caption: 'Inbox',
        //code to display sort icons on load
        onSortCol: function (index, idxcol, sortorder) {
            if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol && this.p.colModel[this.p.lastsort].sortable !== false) {
                    $(this.grid.headers[this.p.lastsort].el).find(">div.ui-jqgrid-sortable>span.s-ico").show();
            }
        },
        loadComplete: function() {

            rowCount = $("#taskList").getGridParam("records");
            if (rowCount > 0){
                $("#warningMessage").html("");
                $("#warningBlock").hide();
                $("#recordsCount").html(rowCount);
                $("#messageBlock").show();                  
            } else if (rowCount <= 0) {
                $("#messageBlock").hide();
                $("#warningMessage").html("No Tasks Found");
                $("#warningBlock").show();
            }


        },
        ignoreCase: true,
        jsonReader : {
               root: "rows",
               page: "page",
               total: "total",
               records: "records",
               repeatitems: false,
               cell: "cell",
               id: "uwEvaluationId"
           }    ,
        postData: {filters: {groupOp: "AND", rules: [{field: "policyNum", op: "bw", data: "h" }]}} 

}; 

    $("#taskList").jqGrid(options);
    $("#taskList").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:true});
    $("#taskList").jqGrid('filterToolbar', {stringReuslt:true, searchOnEnter:false, defaultSearch:"cn", autoSearch:true 

    });

Answer 1

function formatPolicyLink(cellvalue, options, rowObject) { var link = '' + cellvalue + '';

        return link;
        }

        $.jgrid.formatter.integer.thousandsSeparator = ',';
        $.jgrid.formatter.number.thousandsSeparator = ',';
        $.jgrid.formatter.currency.thousandsSeparator = ',';
        $(document).ready(function () {
            'use strict';
            var myData = [
                  /*  {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
                    {id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
                    {id: "3",  invdate: "2011-07-30", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: true,  ship_via: "FE", total: "430.00"},
                    {id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
                    {id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
                    {id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
                    {id: "7",  invdate: "2011-07-30", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
                    {id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: true,  ship_via: "FE", total: "320.00"},
                    {id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00"},
                    {id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00"},
                    {id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"},
                    {id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"}

                    */


                  ],
                $grid = $("#taskList"),
                initDateSearch = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: 'dd-M-yy',
                            autoSize: true,
                            //showOn: 'button', // it dosn't work in searching dialog
                            changeYear: true,
                            changeMonth: true,
                            showButtonPanel: true,
                            showWeek: true,
                            onSelect: function () {
                                if (this.id.substr(0, 3) === "gs_") {
                                    setTimeout(function () {
                                        $grid[0].triggerToolbar();
                                    }, 50);
                                } else {
                                    // to refresh the filter
                                    $(this).trigger('change');
                                }
                            }
                        });
                    }, 100);
                },
                numberSearchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'],
                numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number',
                    searchoptions: { sopt: numberSearchOptions }},
                myDefaultSearch = 'cn',
                getColumnIndex = function (grid, columnIndex) {
                    var cm = grid.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 ($grid, myDefaultSearch) {
                    var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l,
                        rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'),
                        cmi, control, tagName;

                    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 ($grid[0].ftoolbar) === "boolean" && $grid[0].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($grid, 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);
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                cm = [ 
                      {name:'uwEvaluationId', label: 'EvaluationId',formatter:'integer',editable: true,hidden:true, frozen : true,editoptions: {disabled: true, size:5}},
                      {name:'policyNum',label: 'Policy',width: 125,editable: true,formatter:formatPolicyLink,editrules: {required: true}},
                      {name:'transactionType',label: 'Task',width: 40,editable: true,editrules: {required: true}},
                      {name:'uwDecision',label: 'Status',width: 50,editable: true,edittype: 'select',editrules: {edithidden:true},editoptions: {required: true}},
                      {name:'taskCondition',label: 'Condition',align: 'left',width: 60,editable: true,
                       editrules: {required: true, integer: true},editoptions: {size:5, maxlength: 4}},
                      {name:'dueDate',label: 'Due Date',align: 'left',width: 70,editable: true,edittype: 'select',editoptions: {required: true}},
                      {name:'policyEffectiveDate',label: 'Eff Date',width: 70,editable: true,edittype: 'select',editrules: {required: true}},
                      {name:'agencyName',label: 'Agency Name',editable: true,width: 120,edittype: 'select',editrules: {required: true}},
                      {name:'agentCode',label: 'Agency No.',editable: true,width: 75,edittype: 'select',editrules: {required: true}},
                      {name:'producerName',label: 'Producer Name',width: 120,editable: true,edittype: 'select',editrules: {required: true}},
                      {name:'producerCode',label: 'Producer No',width: 75,editable: true,edittype: 'select',editrules: {required: true}},
                      {name:'startDate',label: 'Review Start',width: 80,editable: true,edittype: 'select',editrules: {required: true}},
                      {name:'locationCd',label: 'Location',width: 70,editable: true,edittype: 'select',editrules: {required: true}},
                      {name:'groupName',label: 'Task Group',width: 75,editable: true,edittype: 'select',editrules: {required: true}},
           ],
                saveObjectInLocalStorage = function (storageItemName, object) {
                    if (typeof window.localStorage !== 'undefined') {
                        window.localStorage.setItem(storageItemName, JSON.stringify(object));
                    }
                },
                removeObjectFromLocalStorage = function (storageItemName) {
                    if (typeof window.localStorage !== 'undefined') {
                        window.localStorage.removeItem(storageItemName);
                    }
                },
                getObjectFromLocalStorage = function (storageItemName) {
                    if (typeof window.localStorage !== 'undefined') {
                        return JSON.parse(window.localStorage.getItem(storageItemName));
                    }
                },
                myColumnStateName = function (grid) {
                    return window.location.pathname + '#' + grid[0].id;
                },
                idsOfSelectedRows = [],
                saveColumnState = function (perm) {
                    var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName,
                        postData = this.jqGrid('getGridParam', 'postData'),
                        columnsState = {
                            search: this.jqGrid('getGridParam', 'search'),
                            page: this.jqGrid('getGridParam', 'page'),
                            rowNum: this.jqGrid('getGridParam', 'rowNum'),
                            sortname: this.jqGrid('getGridParam', 'sortname'),
                            sortorder: this.jqGrid('getGridParam', 'sortorder'),
                            permutation: perm,
                            selectedRows: idsOfSelectedRows,
                            colStates: {}
                        },
                        colStates = columnsState.colStates;

                    if (typeof (postData.filters) !== 'undefined') {
                        columnsState.filters = postData.filters;
                    }

                    for (i = 0; i < l; i++) {
                        colItem = colModel[i];
                        cmName = colItem.name;
                        if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                            colStates[cmName] = {
                                width: colItem.width,
                                hidden: colItem.hidden
                            };
                        }
                    }
                    saveObjectInLocalStorage(myColumnStateName(this), columnsState);
                },
                myColumnsState,
                isColState,
                restoreColumnState = function (colModel) {
                    var colItem, i, l = colModel.length, colStates, cmName,
                        columnsState = getObjectFromLocalStorage(myColumnStateName(this));

                    if (columnsState) {
                        colStates = columnsState.colStates;
                        for (i = 0; i < l; i++) {
                            colItem = colModel[i];
                            cmName = colItem.name;
                            if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                                colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
                            }
                        }
                    }
                    return columnsState;
                },
                updateIdsOfSelectedRows = function (id, isSelected) {
                    var index = $.inArray(id, idsOfSelectedRows);
                    if (!isSelected && index >= 0) {
                        idsOfSelectedRows.splice(index, 1); // remove id from the list
                    } else if (index < 0) {
                        idsOfSelectedRows.push(id);
                    }
                },
                firstLoad = true;

            myColumnsState = restoreColumnState.call($grid, cm);
            isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;
            idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ? myColumnsState.selectedRows : [];

            var inboxGridUrl = "/uw-ui/inbox/tasks/Team";           


            $grid.jqGrid({
                url:inboxGridUrl,
                datatype: 'json',
                mtype: 'GET',
                colNames:['EvaluationId','Policy', 'Task','Status','Condition','Due Date','Eff Date','Agency Name','Agency No','Producer Name','Producer No','Review Start','Location','Task Group'],
                colModel :cm,
                rowNum: isColState ? myColumnsState.rowNum : 10,
                rowList: [5, 10, 20],
             //   pager: '#pager',
               // gridview: true,
              //  loadonce: true,
                page: isColState ? myColumnsState.page : 1,
                search: isColState ? myColumnsState.search : false,
                postData: isColState ? { filters: myColumnsState.filters } : {},
                sortname: isColState ? myColumnsState.sortname : 'invdate',
                sortorder: isColState ? myColumnsState.sortorder : 'desc',
              //  rownumbers: true,
                ignoreCase: true,
                multiselect: true,
                //shrinkToFit: false,
                //viewrecords: true,
                hidegrid:false,
                caption: 'Inbox',
                height: 'auto',
                onSelectRow: function (id, isSelected) {
                    updateIdsOfSelectedRows(id, isSelected);
                    saveColumnState.call($grid, $grid[0].p.remapColumns);
                },
                onSelectAll: function (aRowids, isSelected) {
                    var i, count, id;
                    for (i = 0, count = aRowids.length; i < count; i++) {
                        id = aRowids[i];
                        updateIdsOfSelectedRows(id, isSelected);
                    }
                    saveColumnState.call($grid, $grid[0].p.remapColumns);
                },
                loadComplete: function () {
                    var $this = $(this), i, count;

                    if (firstLoad) {
                        firstLoad = false;
                        if (isColState) {
                            $this.jqGrid("remapColumns", myColumnsState.permutation, true);
                        }
                        if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) {
                            // create toolbar if needed
                            $this.jqGrid('filterToolbar',
                                {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
                        }
                    }
                    refreshSerchingToolbar($this, myDefaultSearch);
                    for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
                        $this.jqGrid('setSelection', idsOfSelectedRows[i], false);
                    }
                    saveColumnState.call($this, this.p.remapColumns);
                },
                resizeStop: function () {
                    saveColumnState.call($grid, $grid[0].p.remapColumns);
                }
            });
            $.extend($.jgrid.search, {
                multipleSearch: true,
                multipleGroup: true,
                recreateFilter: true,
                closeOnEscape: true,
                closeAfterSearch: true,
                overlay: 0
            });
            $grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false,search:true,refresh:true});

        });
    //]]>

Answer 2

If you have the values in the session, or wherever and you want to pass those into the filter that will be applied to the grid you can so something like:

var grid = $('#gridName'); //setup a grid variable so we only hit the DOMonce

            var f = { groupOp: "AND", rules: [] };
            if (SessionFilterItem1 != null) { f.rules.push({ field: "SessionFilterItem1", op: "cn", data: SessionFilterItem1 }); }

            grid.jqGrid().trigger('reloadGrid', [{ page: 1}]);


 //Grid Parameter to indicate you are searching
 'search: true,'

This would change the request that goes out from the grid when it is reloaded. (If you don't want the grid to load on the page load, set it's datatype to local, and then reset that value and set where you want the grid to request the data from.

Answer 3

To apply the filter you have to set search: true option of jqGrid together with postData.filters. By the way the type of filters property should be string instead of object. So you should use JSON.stringify before assigning the filter to postData.filters.

Try to use the demo from the answer and this one. I demonstrate in the answers how to save the filter and other information in localStorage.