|
<template>
<div id="app">
<ejs-button v-on:click.native="btnClick">Clear persistance</ejs-button>
<ejs-grid id="Grid" ref="grid" :enablePersistence="true" :dataBound="dataBound" :load="load" >
...
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Resize, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource";
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
var isInitialRender = true;
var isInitialLoad = null;
export default {
data() {
return {
data: data,
filterOptions: {
type: "Excel"
}
};
},
provide: {
grid: [Page, Resize, Sort, Filter]
},
methods: {
btnClick: function(event) {
var grid = this.$refs.grid.ej2Instances;
var initialGridState = JSON.parse(window.localStorage.getItem("pData"));
var initialGridCol = JSON.parse(window.localStorage.getItem("gCol"));
for (var i = 0; i < initialGridCol.length; i++) {
initialGridState.columns[i].headerText =
initialGridState.columns[i].headerBackup; //restore headerText
}
grid.setProperties(initialGridState); // reset the Grid state to default
},
dataBound: function(args) {
var grid = this.$refs.grid.ej2Instances;
if (
window.localStorage.getItem(isInitialLoad) === "true" &&
isInitialRender
) {
window.isInitialLoad = false;
window.initialData = grid.getPersistData();// get the initial data
var perData = grid.getPersistData();
window.localStorage.setItem("pData", perData); // storing the initial data
isInitialRender = false;
window.localStorage.setItem(isInitialLoad, "false");
}
},
load: function(args) {
var grid = this.$refs.grid.ej2Instances;
// ******* check if the grid has rendered in first time ****** //
if (window.localStorage.getItem(isInitialLoad) == null) {
window.localStorage.setItem(isInitialLoad, "true"); // assign when control initialize
isInitialRender = true;
for (var k = 0; k < grid.columns.length; k++) {
grid.columns[k].headerBackup = grid.columns[k].headerText; // storing the intial columns headerText
}
var backupCols = JSON.stringify(grid.columns);
window.localStorage.setItem("gCol", backupCols); //storing initial columns in localstorage
}
}
}
}; | 
