Search results

Dynamically Change columns in React Kanban component

20 Apr 2021 / 2 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.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { kanbanData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], kanbanData, null, true);
    }
    particularColumn() {
        this.kanbanObj.columns[1].allowToggle = true;
    }
    column() {
        this.kanbanObj.columns = [
            { headerText: 'To Do', keyField: 'Open' },
            { headerText: 'Done', keyField: 'Close' }
        ];
    }
    render() {
        return <div className='control-wrapper'>
                <ButtonComponent id='particularColumn' className="e-btn" onClick={this.particularColumn.bind(this)}>Enable Allow Toggle</ButtonComponent>
                <ButtonComponent id='column' className="e-btn" onClick={this.column.bind(this)}>Change Columns</ButtonComponent>
                <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} ref={(kanban) => { this.kanbanObj = kanban; }}>
                    <ColumnsDirective>
                        <ColumnDirective headerText="To Do" keyField="Open"/>
                        <ColumnDirective headerText="In Progress" keyField="InProgress"/>
                        <ColumnDirective headerText="Testing" keyField="Testing"/>
                        <ColumnDirective headerText="Done" keyField="Close"/>
                    </ColumnsDirective>
                </KanbanComponent>
            </div>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { kanbanData } from './datasource';

class App extends React.Component<{}, {}>{
   constructor() {
        super(...arguments);
        this.data = extend([], kanbanData, null, true);
    }
    particularColumn() {
        this.kanbanObj.columns[1].allowToggle= true;
    }
    column() {
      this.kanbanObj.columns = [
        { headerText: 'To Do', keyField: 'Open' },
        { headerText: 'Done', keyField: 'Close' }
      ]
    }
  render() {
    return <div className='control-wrapper'>
                <ButtonComponent id='particularColumn' className="e-btn" onClick={this.particularColumn.bind(this)} >Enable Allow Toggle</ButtonComponent>
                <ButtonComponent id='column' className="e-btn" onClick={this.column.bind(this)}>Change Columns</ButtonComponent>
                <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} ref={(kanban) => { this.kanbanObj = kanban }}>
                    <ColumnsDirective>
                        <ColumnDirective headerText="To Do" keyField="Open"/>
                        <ColumnDirective headerText="In Progress" keyField="InProgress"/>
                        <ColumnDirective headerText="Testing" keyField="Testing"/>
                        <ColumnDirective headerText="Done" keyField="Close"/>
                    </ColumnsDirective>
                </KanbanComponent>
            </div>
  }
};
ReactDOM.render(<App />, document.getElementById('kanban'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Auto Height and Width</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban auto height and width" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='kanban'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>