Having trouble getting help?
Contact Support
Contact Support
Dynamically change columns in Vue Kanban component
11 Jun 20246 minutes to read
You can dynamically change the Kanban columns by using the columns
property.
In the below sample, you can dynamically change the allowToggle
property at the particular column when you click on the button. You can also change the initially created columns to the new Kanban columns by using the columns
property when you click on the button.
<template>
<div id="app">
<ejs-button
id="particular_column"
class="e-btn"
v-on:click="particularColumnClick"
>Enable Allow Toggle</ejs-button
>
<ejs-button id="column" class="e-btn" v-on:click="columnClick"
>Change Columns</ejs-button
>
<ejs-kanban
ref="KanbanObj"
id="kanban"
keyField="Status"
:dataSource="kanbanData"
:cardSettings="cardSettings"
>
<e-columns>
<e-column headerText="To Do" keyField="Open"></e-column>
<e-column headerText="In Progress" keyField="InProgress"></e-column>
<e-column headerText="Testing" keyField="Testing"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
</div>
</template>
<script setup>
/* eslint-disable */
import { KanbanComponent as EjsKanban, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-kanban";
import { ButtonComponent as EjsButton} from "@syncfusion/ej2-vue-buttons";
import { extend } from "@syncfusion/ej2-base";
import { kanbanData } from "./datasource.js";
import { ref, onMounted } from "vue";
const KanbanObj = ref(null);
kanbanData = extend([], kanbanData, null, true);
const cardSettings = {
contentField: "Summary",
headerField: "Id"
};
onMounted = () => {
const KanbanObj = KanbanObj.value.ej2Instances;
};
const particularColumnClick = () => {
KanbanObj.value.columns[1].allowToggle = true;
};
const columnClick = () => {
KanbanObj.value.columns = [
{ headerText: "To Do", keyField: "Open" },
{ headerText: "Done", keyField: "Close" },
];
};
</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>
<template>
<div id="app">
<ejs-button
id="particular_column"
class="e-btn"
v-on:click="particularColumnClick"
>Enable Allow Toggle</ejs-button
>
<ejs-button id="column" class="e-btn" v-on:click="columnClick"
>Change Columns</ejs-button
>
<ejs-kanban
ref="KanbanObj"
id="kanban"
keyField="Status"
:dataSource="kanbanData"
:cardSettings="cardSettings"
>
<e-columns>
<e-column headerText="To Do" keyField="Open"></e-column>
<e-column headerText="In Progress" keyField="InProgress"></e-column>
<e-column headerText="Testing" keyField="Testing"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
</div>
</template>
<script>
import { KanbanComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-kanban";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { extend } from "@syncfusion/ej2-base";
import { kanbanData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-kanban":KanbanComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: function () {
return {
kanbanData: extend([], kanbanData, null, true),
cardSettings: {
contentField: "Summary",
headerField: "Id"
},
};
},
mounted: function () {
this.kanbanObj = this.$refs.KanbanObj.ej2Instances;
},
methods: {
particularColumnClick: function () {
this.kanbanObj.columns[1].allowToggle = true;
},
columnClick: function () {
this.kanbanObj.columns = [
{ headerText: "To Do", keyField: "Open" },
{ headerText: "Done", keyField: "Close" },
];
},
},
};
</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>