Completed
Last Updated: 06 Sep 2021 04:44 by ADMIN
John Campion
Created on: 24 Aug 2021 18:38
Category: Kendo UI® for Vue
Type: Feature Request
1
Grid State Persistence

Hi,

I'm trying to figure out how to persist and restore state in the native Vue grid.  Am I missing something; is this not available yet?

I found the article about doing it with the grid wrappers, but not native.

Thanks!

5 comments
ADMIN
Plamen
Posted on: 06 Sep 2021 04:44

Hello,

Yes indeed this is the correct way to save the columns state. Thank you for sharing you solution with the community.

Regards,
Plamen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John Campion
Posted on: 04 Sep 2021 14:26

For anyone else finding this, yes, you can also save and restore the columns this way too.

https://stackblitz.com/edit/r8ipkk-721v4e?file=src/main.vue

John Campion
Posted on: 31 Aug 2021 20:44

logic not login

 

John Campion
Posted on: 31 Aug 2021 20:43
Thanks!  This is helpful; is there similar login for storing column order and size?
ADMIN
Petar
Posted on: 31 Aug 2021 15:29

Hi John,

The state management in the Vue and thus the Native Vue Grid depends on the values of the properties that are used in a given scenario.

What I want to say with the above is that to reload the Native Grid to a pre-saved state we just need to pass it the values of the different props that have been used at the moment of saving. 

Here is a StackBlitz example demonstrating how we can Save and Reload the state and configuration of the Native Grid component.  To save Grid's state in the example, the following method is used:

saveState: function(){
    this.gridState.sortable = this.sortable;
    this.gridState.filterable = this.filterable;
    this.gridState.groupable = this.groupable;
    this.gridState.skip = this.skip;
    this.gridState.take = this.take;
    this.gridState.group = this.group;
    this.gridState.sort = this.sort;

    localStorage.setItem('gridState', JSON.stringify(this.gridState));
}

To reload Grid's state and configuration the below method is used:

getState: function(){
    const gridState = JSON.parse(localStorage.getItem('gridState'));
    this.sortable = gridState.sortable;
    this.filterable = gridState.filterable;
    this.groupable = gridState.groupable;
    this.skip = gridState.skip;
    this.take = gridState.take;
    this.group = gridState.group;
    this.sort = gridState.sort;

    this.updateState();
}

A key thing with the state and configuration reload is to call the marked in yellow updateState method that refreshes the Grid and is defined as follows:

updateState(){
    this.dataResult = process(orders, {
        skip: this.skip,
        take: this.take,
        sort: this.sort,
        filter: this.filter,
        group: this.group
    });
}

Using the above approach, we can save the values of all Grid properties and not only these listed above.

Another approach you can use is to store Grid's state using Vuex, instead of using the localStorage of your browser. Check this article that discusses the usage of Vuex.

With the above example, I will mark the current Feature Request as completed. Let me know if you have additional questions related to the suggested implementation or if you need further assistance with the current thread. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.