- Restore initial Grid state
- Maintaining custom query in state persistence
- Add a new column in persisted columns list
- See Also
Contact Support
State persistence in Vue Grid component
11 Jun 202416 minutes to read
State persistence refers to the Grid’s state maintained in the browser’s localStorage
even if the browser is refreshed or if you move to the next page within the browser.State persistence stores grid’s model object in the local storage when the enablePersistence
is defined as true.
Restore initial Grid state
When the enablePersistence
property is set to true, the Grid will keep its state even if the page is reloaded. In some cases, you may be required to retain the Grid in its initial state. The Grid will not retain its initial state now since the enablePersistence
property has been enabled.
You can achieve this by destroying the grid after disabling the enablePersistence
property and clearing the local storage data, as shown in the sample below.
<template>
<div id="app">
<button id="restore" @click="clickRestore">Restore to initial state</button>
<br /><br />
<ejs-grid ref="grid" :dataSource='data' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='230px' id="Grid">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const clickRestore = function () {
grid.value.ej2Instances.enablePersistence = false;
window.localStorage.setItem("gridGrid", "");
grid.value.ej2Instances.destroy();
location.reload();
}
provide('grid', [Page, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
<div id="app">
<button id="restore" @click="clickRestore">Restore to initial state</button>
<br /><br />
<ejs-grid ref="grid" :dataSource='data' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='230px' id="Grid">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data
};
},
methods: {
clickRestore: function () {
this.$refs.grid.ej2Instances.enablePersistence = false;
window.localStorage.setItem("gridGrid", "");
this.$refs.grid.ej2Instances.destroy();
location.reload();
}
},
provide: {
grid: [Page, Filter]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Maintaining custom query in state persistence
Grid does not maintain the query params after page load event when enablePersistence
is set to true. This is because the Grid refreshes its query params for every page load. You can maintain the custom query params by resetting the addParams
method in the actionBegin
event.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px' :actionBegin='actionHandler'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const actionHandler = function (){
grid.value.ej2Instances.query.addParams('$filter', 'EmployeeID eq 1');
}
provide('grid', [Sort, Page, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px' :actionBegin='actionHandler'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data
};
},
methods: {
actionHandler: function (){
this.$refs.grid.ej2Instances.query.addParams('$filter', 'EmployeeID eq 1');
}
},
provide: {
grid: [Sort, Page, Filter]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Add a new column in persisted columns list
The Grid columns can be persisted when the enablePersistence property is set to true. If you want to add the new columns with the existing persist state, you can use the Grid inbuilt method such as column.push
and call the refreshColumns() method for UI changes. Please refer to the following sample for more information.
<template>
<div id="app">
<button id="add" @click="clickAdd">Add Columns</button>
<br /><br />
<ejs-grid ref="grid" :dataSource='data' :enablePersistence='true' :allowPaging='true' height='230px' id="Grid">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const clickAdd = function () {
let obj = { field: "Freight", headerText: 'Freight', width: 120 }
grid.value.ej2Instances.columns.push(obj); //you can add the columns by using the Grid columns method
grid.value.ej2Instances.refreshColumns();
}
provide('grid', [Page]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
<div id="app">
<button id="add" @click="clickAdd">Add Columns</button>
<br /><br />
<ejs-grid ref="grid" :dataSource='data' :enablePersistence='true' :allowPaging='true' height='230px' id="Grid">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data
};
},
methods: {
clickAdd: function () {
let obj = { field: "Freight", headerText: 'Freight', width: 120 }
this.$refs.grid.ej2Instances.columns.push(obj); //you can add the columns by using the Grid columns method
this.$refs.grid.ej2Instances.refreshColumns();
}
},
provide: {
grid: [Page]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>