We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

JS Vue Grid Save current grid settings as view to DB.

Thread ID:





145053 Jun 4,2019 12:15 PM UTC Jun 7,2019 01:22 PM UTC Vue 1
Tags: Data Grid
Samuel Heindel
Asked On June 4, 2019 12:15 PM UTC

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. 

Hariharan J V [Syncfusion]
Replied On June 7, 2019 01:22 PM UTC

Hi Samuel, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We could see that you would like to move the Grid to an initial/some other state which was stored previously, after performing some actions in Grid. We have prepared a sample, in which we will be resetting the Grid to the initial state when a button is clicked.  

Documentation : 
In the below code we have stored the Grid’s initial state values and when button is clicked we have assigned that stored initial state values to Grid when we need to reset the state of the Grid by using the setProperties method of Grid. Please refer the code below, 

  <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" > 
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"; 
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" && 
      ) { 
        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 

Please get back to us if you need further assistance. 



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon