Kanban with easy 'add new' button?

[Ben Skoglund]

I'm testing out your Kanban boards. Everything seems straight forwards except I can't find an easy way to implement a button that says 'add new' that opens up a dialog to create new tasks and have it added to the board when saving. 

Im using json data so it doesnt have to be persistent when saved. 

can you advice me please?

My code below:

import React from 'react';

import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';

import { kanbanData, kanbanGrid } from '../data/dummy';

import { Header } from '../components';

const Kanban = () => (

  <div className="m-2 md:m-5 mt-24 p-2 md:p-10 bg-white rounded-3xl">

    <Header category="App" title="Kanban" />

    <KanbanComponent

      id="kanban"

      keyField="Status"

      dataSource={kanbanData}

      cardSettings={{ contentField: 'Summary', headerField: 'Id' }}

    >

      <ColumnsDirective>

          {kanbanGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}

      </ColumnsDirective>

    </KanbanComponent>

  </div>

);

export default Kanban;

[Vinitha Jeyakumar]

Hi Ben,

Your requirement to add a new card using the button from the property panel and read, update, or delete a card by opening the card details in dialog by double-clicking it can be achieved by using the CRUD operations of the Kanban component.

To persisting the component’s state between page reloads can be achieved by enabling the enablePersistance property.

Code snippet:

 <KanbanComponent

                id="kanban"

                ref={(kanban) => {

                  this.kanbanObj = kanban;

                }}

                keyField="Status"

                enablePersistence={true}

                dataSource={this.data}

                cardSettings={{ contentField: 'Summary', headerField: 'Id' }}

                dialogSettings={{ template: this.dialogTemplate.bind(this) }}

              >

                <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>

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

API Link: https://ej2.syncfusion.com/react/documentation/api/kanban#enablepersistence

Demos: https://ej2.syncfusion.com/react/demos/#/material/kanban/dialog-editing

Regards,

Vinitha