0

I have requirement to be able to persist the filtered grid view for a session. I have done something like this. I am storing the filter value into cookie. But not being able to get the desired result.

modifySearchingFilter = function (separator) {


    var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm =     this.p.colModel,
        filters = this.p.postData.filters === undefined ? null : $.parseJSON(this.p.postData.filters);

    console.log(document.cookie);
    if(( filters===null) &&(document.cookie.length != 0)) {
        var tempcookiearray = document.cookie.split(';');
        if (tempcookiearray.length > 1) {
            var temp = tempcookiearray[0];
            var secondtemp = temp.split('=');
            if (secondtemp[1] !== 'null') {
                filters = secondtemp[1];
                filters = $.parseJSON(filters);
            }
        }

    }
    if (filters && filters.rules !== undefined && filters.rules.length>0) {
            var temp = filters.rules;
            rules = filters.rules;
            for (i = 0; i < rules.length; i++) {
                rule = rules[i];
                iCol = getColumnIndexByName.call(this, rule.field);
                cmi = cm[iCol];
                if (iCol >= 0 &&
                        ((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
                            && (rule.op === myDefaultSearch)) ||
                        (typeof (cmi.searchoptions) === "object" &&
                            $.isArray(cmi.searchoptions.sopt) &&
                            cmi.searchoptions.sopt[0] === rule.op)) {
                    // make modifications only for the "contains" operation
                    parts = rule.data.split(separator);
                    if (parts.length > 1) {
                        if (filters.groups === undefined) {
                            filters.groups = [];
                        }
                        group = {
                            groupOp: "OR",
                            groups: [],
                            rules: []
                        };
                        filters.groups.push(group);
                        for (j = 0, l = parts.length; j < l; j++) {
                             str = parts[j];
                            if (str) {
                                // skip empty "", which exist in case of two separaters of once
                                group.rules.push({
                                    data: parts[j],
                                    op: rule.op,
                                    field: rule.field
                                });
                            }
                        }
                        rules.splice(i, 1);
                        i--; // to skip i++
                    }
                }
            }
        }
      this.p.postData.filters = JSON.stringify(filters);
   document.cookie = "cookie=" + this.p.postData.filters;

};
 $.ajax({
        method: "GET"
        , url: "/Test/_vti_bin/ListData.svc/ProductList?$expand=Invoice"
        , contentType: "application/json; charset=utf-8"
        , dataType: "json"
        , success: function (data, status) {
            ParseData(data.d);
        }
        , error: function () {
            //alert("WAT?!");
        }
    });
var ParseData = function (d) {
  var newData = {
    totalPages: 1
    , currentPage: 1
    , totalRows: d.results.length
    , data: d.results
};

BuildTable(newData);

};

var BuildTable = function (d) { 
$("#jqGrid").jqGrid({
     data: d.data,
    datatype: 'local',
     colModel: [
       { label: "Title", name: 'Title' },
       { label: "Number", name: 'Number', align: 'center', key: true },
       { label: "Date", name: 'Date', align: 'center' },
       { label: "Descritption", name: 'Description', formatter: testformat       },
       { label: "Category", name: 'Category'}
    ],
    loadonce: true,
    viewrecords: true,
    autowidth: true,
    shrinkToFit: false,
    sortable: true,
    sortname:"Title",
    rowNum: '999',
    rownumbers:true
 });

setSearchSelect('Title');
setSearchSelect('Number');
setSearchSelect('EndDate');
 setSearchSelect('Description');
   setSearchSelect('Category');

function testformat(cellvalue, options, rowObject) {

    return "<a href='http://www.google.com' target='_blank'>" + cellvalue + "</a>"

};

// activate the filterToolbar 
$('#jqGrid').jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: true,
   // defaultSearch: myDefaultSearch,
    beforeClear: function () {

        $(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
            $(this).prev("select[multiple]").multiselect("refresh");
        }).css({
            width: "98%",
            marginTop: "1px",
            marginBottom: "1px",
            paddingTop: "3px"
        });
    }
}).trigger('reloadGrid');

$('#jqGrid').jqGrid('setGridParam', {
    beforeRequest: function () {

        modifySearchingFilter.call(this, ",");

    }
});

$('#jqGrid').jqGrid('setGridParam', {
    loadComplete: function () {
        $('.ui-jqgrid .ui-jqgrid-htable th').css('background-color', '#DCD796');
        $('.ui-jqgrid tr.jqgrow:odd').css('background-color', '#FFFCED');
        $('.ui-jqgrid .ui-jqgrid-bdiv').css('height', '500px');
        $('.ui-multiselect-checkboxes LI').css('font-size', '1.2em');
    }

}).trigger('reloadGrid'); };

enter code here
Andy
  • 1
  • 1
  • Please include the information about the version of jqGrid, which you use (can use), and the fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7), which you use, in **all** your questions. The code fragment, which you post looks like the copy of my old code. Free jqGrid fork, which I develop, contains support of `"in"` filter, which allows to simplify the code. To save the filter in cookie of `localStorage` one need to save `postData.filters`. – Oleg Mar 16 '17 at 11:45
  • [The demo](https://jsfiddle.net/OlegKi/3oeatxur/6/) from [the issue](https://github.com/free-jqgrid/jqGrid/issues/290) could be interesting for you. [The answer](http://stackoverflow.com/a/31663268/315935) and [the old one](http://stackoverflow.com/a/8436273/315935) contain information about saving the filter in `localStorage`. – Oleg Mar 16 '17 at 12:22
  • Following are the library that i am using for the project: jqGrid 4.7.0, jQuery MultiSelect UI Widget 1.13 EricHynds and jQuery UI 1.12.1. – Andy Mar 16 '17 at 14:29
  • Thank you Oleg for your reply. I have updated the code sample. What I am trying to achieve is to retain the filtered or sorted state of jqgrid when user comes back and reload the grid. – Andy Mar 16 '17 at 14:42

0 Answers0