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

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

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. 


4 Replies

HJ Hariharan J V Syncfusion Team June 7, 2019 05:22 AM

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, 

<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 
      } 
    } 
  } 
}; 

Please get back to us if you need further assistance. 

Regards, 
Hariharan 



MW Meidika Wardana October 13, 2021 10:08 PM

Hi Hariharan, I have used your solution to restore headerText and it works fine. But I have another issue. For columns that have their own dataSource, they will display foreignKeyField (for example id) instead of foreignKeyValue (for example description). How I can restore such columns so they will display foreignKeyValue instead of foreignKeyField?


The current condition:



What I want:




MW Meidika Wardana replied to Meidika Wardana October 13, 2021 10:13 PM

Comparison between column with dataSource (yellow) and column without dataSource (orange):

comparison.jpg



RS Rajapandiyan Settu Syncfusion Team October 15, 2021 02:43 AM

Hi Meidika, 

Thanks for contacting Syncfusion support. 

Before proceeding with your query, we need few more information on your requirement. So, kindly share the below details to provide a better solution. 

  1. What is your requirement explain in detail?
  2. Are want to maintain the initial columns settings while persisting the Grid state?
  3. How could you bind the dataSource to the Grid column? Which type data you have used (remote/local)?
  4. Did you tried EnablePersistence feature in your application? What are the issues you have face while using inbuild Grid persistence?
  5. Share the full Grid code files and package.json file.


Regards, 
Rajapandiyan S

Loader.
Live Chat Icon For mobile
Up arrow icon