Persistence in Vue Kanban component
16 Mar 20232 minutes to read
State persistence refers to the Kanban state maintained in the browser’s localStorage
even if the browser is refreshed or if you move to the next page within the browser.
State persistence stores Kanban datasource, column and swimlane expand/collapse state in the local storage when the enablePersistence
is defined as true.
<template>
<div id="app">
<ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
:cardSettings="cardSettings" enablePersistence="true" :swimlaneSettings="swimlaneSettings">
<e-columns>
<e-column headerText="To Do" keyField="Open" allowToggle="true"></e-column>
<e-column headerText="In Progress" keyField="InProgress" allowToggle="true"></e-column>
<e-column headerText="Testing" keyField="Testing" allowToggle="true"></e-column>
<e-column headerText="Done" keyField="Close" allowToggle="true"></e-column>
</e-columns>
</ejs-kanban>
</div>
</template>
<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
data: function() {
return {
kanbanData: extend([], kanbanData, null, true),
cardSettings: {
contentField: "Summary",
headerField: "Id",
},
swimlaneSettings: {
keyField: "Assignee"
}
};
},
}
</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-layouts/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-vue-kanban/styles/material.css';
</style>