Hello, everyone. 

I am writing to share that there is already a separate demo about the Native Grid's State Persistence that can be found on this link to our documentation.

Regards,
Petar
Progress Telerik

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

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