Add to persist in Vue Grid component

11 Jun 202413 minutes to read

Persist the column template, header template and header Text

By default, the Grid properties such as column template, header text, header template, column formatter, and value accessor will not persist when enablePersistence is set to true. Because the column template and header text can be customized at the application level.

If you wish to restore all these column properties, then you can achieve it by cloning the grid’s columns property using JavaScript Object’s assign method and storing this along with the persist data manually. While restoring the settings, this column object must be assigned to the grid’s columns property to restore the column settings as demonstrated in the following sample.

<template>
    <div id="app">
       <button id="restore"  @click="clickRestore">Restore</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 :headerTemplate="hTemplate"></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150 :template='cTemplate'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
 <script id="template" type="text/x-template">
        <a rel='nofollow' href="https://en.wikipedia.org/wiki/${ShipName}"><span class="e-icons e-column"></span></a>
    </script>
  
    <script id="customertemplate" type="text/x-template">
        <span class="e-icons e-header" ></span>
        Customer ID
    </script>
<script setup>
import { provide, ref, createApp } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const app = createApp();
var headTemplate = app.component("header", {
    template: '<span class="e-icons e-header">CustomerID</span>',
    data() {
    return {
        data: {}
    };
    }
});

var columnTemplate = app.component("column", {
     template: '<a rel="nofollow" href="https://en.wikipedia.org/wiki/${ShipName}"><span class="e-icons e-column"></span></a>',
     data() {
     return {
         data: {}
     };
     }
});

      const hTemplate = function (e) {
          return {
              template: headTemplate
          };
      }
      const cTemplate = function (e) {
          return {
              template: columnTemplate
          };
      }
    const clickRestore = function () {
        let savedProperties = JSON.parse(this.$refs.grid.ej2Instances.getPersistData());
        let gridColumnsState = Object.assign([], this.$refs.grid.ej2Instances.getColumns());
        savedProperties.columns.forEach((col: {
            field: any;
            headerText: any;
            template: any;
            headerTemplate: any;
        }) => {
            let headerText = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['headerText'];
            let colTemplate = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['template'];
            let headerTemplate = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['headerTemplate'];
            col.headerText = 'Text Changed';
            col.template = colTemplate;
            col.headerTemplate = headerTemplate; //likewise you can restore required column properties as per your wants.
        }
        );
       console.log(savedProperties);
       this.$refs.grid.ej2Instances.setProperties(savedProperties);
    }
  provide('grid',  [Page]);
</script>
<style>
   .e-column:before {
      content: '\e815';
    }

    .e-header:before {
      content: '\ea9a';
    }
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
    <div id="app">
       <button id="restore"  @click="clickRestore">Restore</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 :headerTemplate="hTemplate"></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150 :template='cTemplate'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
 <script id="template" type="text/x-template">
        <a rel='nofollow' href="https://en.wikipedia.org/wiki/${ShipName}"><span class="e-icons e-column"></span></a>
    </script>
  
    <script id="customertemplate" type="text/x-template">
        <span class="e-icons e-header" ></span>
        Customer ID
    </script>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { createApp } from "vue";
const app = createApp();
var headTemplate = app.component("header", {
    template: '<span class="e-icons e-header">CustomerID</span>',
    data() {
    return {
        data: {}
    };
    }
});
var columnTemplate = app.component("column", {
     template: '<a rel="nofollow" href="https://en.wikipedia.org/wiki/${ShipName}"><span class="e-icons e-column"></span></a>',
     data() {
     return {
         data: {}
     };
     }
});
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      hTemplate: function (e) {
          return {
              template: headTemplate
          };
      },
      cTemplate: function (e) {
          return {
              template: columnTemplate
          };
      }
    };
  },
  methods: {
    clickRestore: function () {
        let savedProperties = JSON.parse(this.$refs.grid.ej2Instances.getPersistData());
        let gridColumnsState = Object.assign([], this.$refs.grid.ej2Instances.getColumns());
        savedProperties.columns.forEach((col: {
            field: any;
            headerText: any;
            template: any;
            headerTemplate: any;
        }) => {
            let headerText = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['headerText'];
            let colTemplate = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['template'];
            let headerTemplate = gridColumnsState.find((colColumnsState) => colColumnsState.field === col.field)['headerTemplate'];
            col.headerText = 'Text Changed';
            col.template = colTemplate;
            col.headerTemplate = headerTemplate; //likewise you can restore required column properties as per your wants.
        }
        );
       console.log(savedProperties);
       this.$refs.grid.ej2Instances.setProperties(savedProperties);
    }
  },
  provide: {
    grid: [Page]
  }
}
</script>
<style>
   .e-column:before {
      content: '\e815';
    }

    .e-header:before {
      content: '\ea9a';
    }
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>