Kanban grid

[Andrei Iosup]

Is there a way to make it so you can remove or add a task in a Kanban Grid

[Vinitha Jeyakumar]

Hi Andrei,

Your requirement to add the card to the Kanban board can be achieved by using the openDialog which manually opens the dialog and accepts the action for which the dialog needs to be opened such as either for new card creation or editing of existing cards and addCard which adds the new card to the data source of Kanban and layout. 

Also, you can remove the card by using the deleteCard method which deletes the card based on the provided ID or card collection in the argument list or you can simply delete the card by opening the edit card dialog and then by clicking delete button.

Please check the sample and video illustration which we have created for your reference,

Code snippet:

function addClick() {

    const cardIds = kanbanObj.kanbanData.map((obj) =>

      parseInt(obj.Id.replace('Task ', ''), 10)

    );

    const cardCount = Math.max.apply(Math, cardIds) + 1;

    const cardDetails = {

      Id: 'Task ' + cardCount,

      Status: 'Open',

      Priority: 'Normal',

      Assignee: 'Andrew Fuller',

      Estimate: 0,

      Tags: '',

      Summary: '',

    };

    kanbanObj.openDialog('Add', cardDetails);

  }

  

  function deleteClick() {

    kanbanObj.deleteCard('Task 1');

  }

  return (

            <KanbanComponent

              id="kanban"

              ref={(kanban) => {

                kanbanObj = kanban;

              }}

              keyField="Status"

              dataSource={data}

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

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

            >

              <ColumnsDirective>

                <ColumnDirective

                  headerText="To Do"

                  keyField="Open"

                  showAddButton="true"

                />

                <ColumnDirective

                  headerText="In Progress"

                  keyField="InProgress"

                  showAddButton="true"

                />

                <ColumnDirective

                  headerText="Testing"

                  keyField="Testing"

                  showAddButton="true"

                />

                <ColumnDirective

                  headerText="Done"

                  keyField="Close"

                  showAddButton="true"

                />

              </ColumnsDirective>

            </KanbanComponent>

               <ButtonComponent

                  id="addNew"

                  className="e-btn e-dialog-add"

                  onClick={addClick.bind(this)}

                >

                  Add New Card

                </ButtonComponent>

              </td>

              <td>

                <ButtonComponent

                  id="delete"

                  className="e-btn e-dialog-add"

                  onClick={deleteClick.bind(this)}

                >

                  Delete Card

                </ButtonComponent>

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

API Link: 

deleteCard: https://helpej2.syncfusion.com/react/documentation/api/kanban#deletecard

addCard: https://helpej2.syncfusion.com/react/documentation/api/kanban#addcard

openDialog: https://helpej2.syncfusion.com/react/documentation/api/kanban#opendialog

Regards,

Vinitha

Attachment: Video_Kanban_f3669aa9.zip