0

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 

    });
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
user1911538
  • 21
  • 1
  • 5

3 Answers3

1

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for the various links. Appreciate the work you done on it too. For Something like jqgrid this support is great. Thanks – user1911538 Oct 03 '13 at 13:47
  • Not yet Oleg. I seem to get the grid and save its value even on reload but not able to filter the trigger even now.This time not even filtering at first load – user1911538 Oct 03 '13 at 14:04
  • Is it really needed to store json in localstorage. What about data coming in as json via url. Thanks – user1911538 Oct 03 '13 at 15:10
0

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.

Mark
  • 3,123
  • 4
  • 20
  • 31
  • Thanks for the response but I tried this several time with no effect to the grid as it does not take the filter values on load every time i come back to the page. Hence looking for any workaorund if available or some function that can help publish the criteria value to the grid. Thanks – user1911538 Oct 01 '13 at 19:13
  • @user1911538 As Oleg mentioned above, you need to set the grid parameter `search:true,` you then should see the search values you set go out in the request for data. – Mark Oct 01 '13 at 19:29
  • Thanks for the options. I am looking into it will try and get back incase there are no roadblocks. Thanks – user1911538 Oct 03 '13 at 13:46
  • I used the idea and tried with similar code. Just didnt seem to work as maybe the idea implemented in the demo was for local data but when not localized it does not trigger the grid search. Anyways thanks for the examples.It gave me a quite a few attempts to try. – user1911538 Oct 04 '13 at 20:29
0

Grid not filtered on filter criteria values

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});

        });
    //]]>
user1911538
  • 21
  • 1
  • 5