I have a Grid with a button that take you to other view where all the data of the item selected is show, what I'm trying to do is that when the user return to the grid view, the filters of the grid remain instead of show all the data.

For saving the filters, I use the getOptions method of Kendo Grid and stored on localStorage using the following code:

var grid = $("#Grid").data("kendoGrid");
var op = grid.getOptions();
localStorage["KendoGridOptions"] = JSON.stringify(op);

And get this:

The problem is when I try to use the setOptions method, I do this on $(document).ready after initialize the grid:

var options = localStorage["KendoGridOptions"];
if (options) {
    var op = JSON.parse(options);
    var grid = $("#Grid").data("kendoGrid");
    grid.setOptions({
        dataSource: op.dataSource
    });
    localStorage.removeItem("KendoGridOptions");
}

And I get this error on the gid.setOptions line:

Any suggestions on how to resolve that error or how to get the desired behavior?

I have a Grid with a button that take you to other view where all the data of the item selected is show, what I'm trying to do is that when the user return to the grid view, the filters of the grid remain instead of show all the data.

For saving the filters, I use the getOptions method of Kendo Grid and stored on localStorage using the following code:

var grid = $("#Grid").data("kendoGrid");
var op = grid.getOptions();
localStorage["KendoGridOptions"] = JSON.stringify(op);

And get this:

The problem is when I try to use the setOptions method, I do this on $(document).ready after initialize the grid:

var options = localStorage["KendoGridOptions"];
if (options) {
    var op = JSON.parse(options);
    var grid = $("#Grid").data("kendoGrid");
    grid.setOptions({
        dataSource: op.dataSource
    });
    localStorage.removeItem("KendoGridOptions");
}

And I get this error on the gid.setOptions line:

Any suggestions on how to resolve that error or how to get the desired behavior?

• javascript
• kendo-ui
• kendo-grid

2 Answers 2

The problem was the jQuery version, addBack function is added on the 1.8 version, this project still have the 1.7, just change the version and works perfect.

I have achieved by below method. If you want only page number, page size, sort and filter mention only those. I tried saving all the options and i remember having issues. I have spent lot of time on this. Let me know if you still have any issues

function saveGridOptions() {
var grid = $("#gridName").data("kendoGrid");
var dataSource = grid.dataSource;

var state = {
    page: dataSource.page(),
    pageSize: dataSource.pageSize(),
    sort: dataSource.sort(),
    filter: dataSource.filter()
};
    localStorage["kendo-grid-options"] = kendo.stringify(state);    
}


function loadGridOptions() {
var grid = $("#gridName").data("kendoGrid");
var state = "";   
state = localStorage["kendo-grid-options"];

if (state) {

    data = JSON.parse(state);
    var options = grid.options;
    options.dataSource.page = data.page;
    options.dataSource.pageSize = data.pageSize;
    options.dataSource.sort = data.sort;
    options.dataSource.filter = data.filter;
    grid.destroy();

    $("#gridName")
   .kendoGrid(options);

}

}