How to reload kendo grid with filtered data?

Question

I have a kendo grid, in which I have selected filter on one column, I am reloading the grid, I want the same filter to be there when grid reloads.

I am using the below code to reload the grid. It works, but it doesn't show the selected filter item checked. I checked IDR in the filter then reloaded the page, it shows 1 item selected but doesn't show IDR as checked.

function ReloadGrid() {
    var grid = $('#gridId').data('kendoGrid');
    grid.dataSource.read();
    grid.setDataSource(grid.dataSource);
}

Answer 1

Well there is two way to achieve this.

One way is to save filters in database and second one is to use local storage as mentioned in comment.

I prefer second one, using local storage to save filters and load it upon read.

@GaloisGirl is pointing you in right direction.

Check this example again: Persist state

Basic usage of locale storage is to save some data under some name (key,value):

    let person = {
        name: 'foo',
        lastName: 'bar'
    };

    let save = function (person) {
        let personString = JSON.stringify(person);
        localStorage.setItem('person', personString);
        console.log('Storing person: ', personString);

    };

    let load = function () {
        let personString = localStorage.getItem('person'); // <----string
        let person = JSON.parse(personString); // <----object
        console.log('Stored person: ', person);
    };

    let remove = function (name) {
        localStorage.removeItem(name);
        console.log('Removed from local storage!');
    };

    save(person);
    load();
    remove(person.name);

In kendo world you need to save current options state of grid in local storage, you can achieve that by adding button like in example or on the fly with change or with window.onbeforeunload or like in your example beforen reload grid.

You can check saved data under application tab in browsers, eg. chrome:

Hope it helps, gl!