State Persistence in Syncfusion Vue components

28 Jun 20244 minutes to read

Syncfusion Vue UI components support persisting their state across page refreshes or navigation. To enable this feature, set the enablePersistence property to true for the desired component. This stores the component’s state in the browser’s localStorage object on the unload event of the page. For example, the enablePersistence property can be set for the Grid component, as shown in the following code snippet.

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, Sort, Page, Filter } from '@syncfusion/ej2-vue-grids';
import { provide } from "vue";
import data from './datasource.js';
provide('grid', [Sort, Page, Filter]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data
    };
  },
  provide: {
    grid: [Sort, Page, Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

State Persistence supported components and properties

The following table illustrates the list of Syncfusion Vue components that are supported with state persistence and the properties that are stored in the localStorage.

component Name Properties
Grid
  • Columns
  • filterSettings
  • searchSettings
  • groupSettings
  • pageSettings
  • selectedRowIndex
  • scrollPosition
Accordion
  • expandedIndices
Tabs
  • selectedItem
Schedule
  • currentView
  • selectedDate
  • scrollLeft
  • scrollTop
Kanban
  • columns
  • dataSource
  • swimlaneToggleArray
Chart
  • zoomFactor
  • zoomPosition
Maps
  • zoomSettings
Pivot Table
  • dataSourceSettings
  • pivotValues
  • gridSettings
  • chartSettings
  • displayOption
TreeGrid
  • columns
  • pageSettings
  • searchSettings
  • filterSettings
  • selectedRowIndex
  • sortSettings
Switch, Checkbox
  • checked
RadioButton
  • checked
  • value
ColorPicker, ListBox, In-placeEditor, RichTextEditor,
Autocomplete, Calendar, ComboBox, DatePicker, DropDownList,
MaskedTextBox, NumericTextBox, Textbox, TimePicker, Multiselect,
DateTimePicker, Slider, Dropdown Tree
  • value
QueryBuilder
  • rule
Splitter
  • paneSettings
DateRangePicker
  • startDate
  • endDate
  • value
Uploader
  • filesData
ListView
  • cssClass
  • enableRtl
  • htmlAttributes
  • enable
  • fields
  • animation
  • headerTitle
  • sortOrder
  • showIcon
  • height
  • width
  • showCheckBox
  • checkBoxPosition
TreeView
  • selectedNodes
  • checkedNodes
  • expandedNodes
Dashboard Layout
  • panels
File Manager
  • view
  • path
  • selectedItems
Sidebar
  • type
  • position
  • isOpen

Check out the following component’s document to learn more about the state persistence.