Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 145053 | Jun 4,2019 12:15 PM UTC | Jun 7,2019 01:22 PM UTC | Vue | 1 |
|
Tags: Data Grid |
I am working on a grid
that potentially can be very large for our users. It uses a lot of the built-in
features Syncfusion provides. I would like to make it so they can arrange the Grid in a
way like (move columns around, remove or add columns, group by, sort etc...) and then
be able to save that modified grid as a view that can be selected anytime they
are using our tool. potentially they could have multiple view saves they could
load at will.
The piece I am having
trouble with is getting the grid state, and reloading it on the page. I would
be saving the state to a field in a firebase DB to be called on anytime it is
needed. I have read and seen the documentation on state persistence and
saving it to local storage, and have tried to use that to save to our DB but
have been unsuccessful. I am hoping I am hoping to find an additional example,
or documentation of something like this.
|
<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
}
}
}
}; |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
