How can I dynamically create Syncfusion Ui's KanbanComponent and set Kanban Component header in ReactJS using TypeScript?

Question

How to create syncfution Ui's KanbanComponent Dynamically in React js and also how to set Kanban Component header Dynamically?

<ColumnsDirective>
                                        <ColumnDirective headerText="Active" keyField="Active" allowToggle={true} template={this.columnTemplate} />
                                        <ColumnDirective headerText="Work In Progress" keyField="workInProgress" allowToggle={true} template={this.columnTemplate} />
                                        <ColumnDirective headerText="Approved" keyField="Approved" allowToggle={true} template={this.columnTemplate} />
                                        <ColumnDirective headerText="Closed" keyField="Closed" allowToggle={true} template={this.columnTemplate} />
                                        <ColumnDirective headerText="Archive" keyField="Archive" allowToggle={true} template={this.columnTemplate} />
                                    </ColumnsDirective>

 <KanbanComponent
                   dialogOpen={this.dialogOpen.bind(this)}
                                    id="kanban"
                                    cssClass="kanban-overview"
                                    keyField="T_Status"
                                    dataSource={this.getFilteredData()}
                                    dragStop={(data: any) => {
                                        this.props.onTasksStatusChanged(data);
                                    }}
                                    enableTooltip={true}
                                    swimlaneSettings={{ keyField: "P_ProjectEngineer", allowDragAndDrop: true }}
                                    cardSettings={{
                                        headerField: "T_Title",
                                        template: this.renderCardTemplate.bind(this),
                                        selectionType: "Multiple"
                                    }}
                                    //dialogSettings={{ fields: fields as any }}
                                    cardRendered={(props: any) => this.cardRenderer(props)}>
                                     <ColumnsDirective>
                                        {this.props.columnName.map((e: any) => {
                                            return <ColumnDirective headerText={e} keyField={e} allowToggle={true} template={this.columnTemplate} />
                                        })}
                                    </ColumnsDirective>
                                </KanbanComponent>

Answer 1

If you want to set Kanban component header dynamically, you can use the columns property of the Kanban. Check the code and sample below,

Code snippet:

 <KanbanComponent
        id="kanban"
        cssClass="kanban-overview"
        keyField="Status"
        dataSource={data}
        enableTooltip={true}
        swimlaneSettings={{ keyField: 'Assignee' }}
        cardSettings={{
          headerField: 'Title',
          template: cardTemplate.bind(this),
          selectionType: 'Multiple',
        }}
        dialogSettings={{ fields: fields }}
        cardRendered={cardRendered.bind(this)}
        columns={columns}
      >         
        
      </KanbanComponent>

let columns= [
{
  headerText: 'To Do',
  keyField: 'Open',
  allowToggle: true,
},
{
  headerText: 'In Progress',
  keyField: 'InProgress',
  allowToggle: true,
},
{
  headerText: 'In Review',
  keyField: 'Review',
  allowToggle: true,
},
{
  headerText: 'Done',
  keyField: 'Close',
  allowToggle: true,
},

],

Sample: https://stackblitz.com/edit/react-pjv7rd?file=index.js

API Link: https://helpej2.syncfusion.com/react/documentation/api/kanban#columns

Regards,

Vinitha