We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Kanban grid

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


1 Reply

VJ Vinitha Jeyakumar Syncfusion Team April 6, 2023 06:31 AM UTC

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(MathcardIds) + 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>





API Link: 

Regards,
Vinitha



Attachment: Video_Kanban_f3669aa9.zip

Loader.
Up arrow icon