How to copy paste a itme to a other swimlane in the Kanban component

[Vedad]

Dear Syncfusion support,

Im using the kanban component and I was wondering.

How could I copy and paste an item to another swimlane?

Do you have an example of such a usecase?

With kind regards,

Vedad Piric 

[Vinothkumar Yuvaraj]

Hi Vedad,

We have validated your query, and we don’t have support for the kanban card copy and paste within the kanban component. However, we have achieved your requirement at the application level.

In this sample, we have enabled the card selection using the `selectionType` property in the `cardSettings`. After selecting the card, when we press Ctrl+C, we get the selected card details using the `getCardDetails` method. And we have pasted (Ctrl+V), and the card is added based on the swimlane column target using the `addCard` method. Could you please see the following sample for your reference.

Index.js

const Swimlane = () => {

  let taskUniqueId = 30;

  let kanbanObj = useRef(null);

  let data = extend([], dataSource.kanbanData, null, true);

  let getCopiedCardData;

  const created = (args) => {

    const board = document.querySelector('#kanban.kanban-swimlane');

    board.addEventListener('keydown', (event) => {

      if (event.ctrlKey && event.key === 'c') {

        let getCopiedCardElement = kanbanObj.current.getSelectedCards()[0];

        getCopiedCardData = kanbanObj.current.getCardDetails(getCopiedCardElement);

        event.preventDefault();

      }

    if (event.ctrlKey && event.key === 'v') { 

        if(event.target.closest(".e-content-cells[data-key='Open']") != undefined || null){

           if (event.target.closest(".e-content-cells[data-key='Open']").getAttribute('data-key') == 'Open') {

            let rowElement = event.target.closest(".e-content-cells[data-key='Open']").closest(".e-content-row");

            let simlaneKeyfild = findIndex(rowElement);

            taskUniqueId+=1;

            getCopiedCardData.Assignee = simlaneKeyfild;

            getCopiedCardData.Status = "Open";

            getCopiedCardData.Id = "Task "+taskUniqueId;

            kanbanObj.current.addCard(getCopiedCardData, 0);

          }

        }

         // In Progress

        if(event.target.closest(".e-content-cells[data-key='InProgress']") != undefined || null){

            if (event.target.closest(".e-content-cells[data-key='InProgress']").getAttribute('data-key') == 'InProgress') {

              let rowElement = event.target.closest(".e-content-cells[data-key='InProgress']").closest(".e-content-row");

              let simlaneKeyfild = findIndex(rowElement);

              taskUniqueId+=1;

              getCopiedCardData.Assignee = simlaneKeyfild;

              getCopiedCardData.Status = "InProgress";

              getCopiedCardData.Id = "Task "+taskUniqueId;

              kanbanObj.current.addCard(getCopiedCardData, 1);

           }

        }

        // Done

        if(event.target.closest(".e-content-cells[data-key='Close']") != undefined || null){

          if (event.target.closest(".e-content-cells[data-key='Close']").getAttribute('data-key') == 'Close') {

            let rowElement = event.target.closest(".e-content-cells[data-key='Close']").closest(".e-content-row");

            let simlaneKeyfild = findIndex(rowElement);

            taskUniqueId+=1;

            getCopiedCardData.Assignee = simlaneKeyfild;

            getCopiedCardData.Status = "Close";

            getCopiedCardData.Id = "Task "+taskUniqueId;

            kanbanObj.current.addCard(getCopiedCardData, 2);

         }

      }

    };

    });

  };

  function findIndex(rowElement){

      let rowElementList = document.querySelectorAll(".e-kanban-table tbody .e-content-row");

      let foundIndex = Array.from(rowElementList).findIndex((element) => element.isEqualNode(rowElement));

      return rowElementList[foundIndex-1].getAttribute("data-key");

  }

  return (

    <div className="kanban-control-section">

      <div className=" control-section">

        <div className="control-wrapper">

          <KanbanComponent

            id="kanban"

            cssClass="kanban-swimlane"

            ref={kanbanObj}

            keyField="Status"

            dataSource={data}

            cardSettings={{

              contentField: 'Summary',

              headerField: 'Id',

              selectionType: 'Single',

            }}

            swimlaneSettings={{ keyField: 'Assignee' }}

            height="500px"

            created={created}

          >

            <ColumnsDirective>

              <ColumnDirective headerText="To Do" keyField="Open" />

              <ColumnDirective headerText="In Progress" keyField="InProgress" />

              <ColumnDirective headerText="Done" keyField="Close" />

            </ColumnsDirective>

          </KanbanComponent>

        </div>

      </div>

    </div>

  );

};

Sample : https://stackblitz.com/edit/react-2nlkjy-x6r3wb?file=index.js

API Link :

https://ej2.syncfusion.com/javascript/documentation/api/kanban#getcarddetails

https://ej2.syncfusion.com/javascript/documentation/api/kanban#addcard             

https://ej2.syncfusion.com/javascript/documentation/api/kanban/selectionType/

Regards,

Vinothkumar

[Vedad]

Hi,

Sorry for my late response. Implemented and worked like a charm.

Thank you very much!!

Regards,

Vedad

[Vinitha Jeyakumar]

Hi Vedad,

You are welcome

Regards,

Vinitha