Dynamically change columns in EJ2 TypeScript Kanban control
29 Aug 20234 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.
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';
let kanbanObj: Kanban = new Kanban({
dataSource: kanbanData,
keyField: 'Status',
columns: [
{ headerText: 'Backlog', keyField: 'Open' },
{ headerText: 'In Progress', keyField: 'InProgress' },
{ headerText: 'Testing', keyField: 'Testing' },
{ headerText: 'Done', keyField: 'Close' }
],
cardSettings: {
contentField: 'Summary',
headerField: 'Id'
}
});
kanbanObj.appendTo('#Kanban');
let particularColumn: HTMLElement = document.getElementById('particularColumn');
let column: HTMLElement = document.getElementById('column');
particularColumn.onclick = () => {
kanbanObj.columns[1].allowToggle= true;
};
column.onclick = () => {
kanbanObj.columns = [
{ headerText: 'To Do', keyField: 'Open' },
{ headerText: 'Done', keyField: 'Close' }
]
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Card without Header</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban card without header" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-kanban/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="content-wrapper">
<button class="e-btn" id="particularColumn">Enable Allow Toggle</button>
<button class="e-btn" id="column">Change Columns</button>
<div id="Kanban"></div>
</div>
</div>
</body>
</html>