Drag and Drop between two kanbans

Question

Hi,I'd like the swimlane kanban, it has group function and support multi columns.I want to add another normal kanban at the left of swimlane kanban, can drag and drop between the two kanbans.Can it be achieved ? If not, can the left normal kanban change to draggable view list instead ? can drag and drop between the two control.

Revanth Krishnan · Accepted Answer

Hi Lorryl, 
 
 
Good day to you. 
 
 
We have validated your query “At first the kanban has the swimlaneSettings when I click a button, I want to clear the swimlaneSettings, When I call "this.kanbanObj.swimlaneSettings = null;" and "this.kanbanObj.refresh();", it not working”. 
 
Your requirement can be achieved by setting the ‘keyField’ in the ‘swimlaneSettings’ as empty string. We have prepared a sample for your reference, 
 
Code Snippet: 
 




public clearSwimlane(): void { 
  this.swimlaneSettings = { keyField: '' }; 
} 
 
Sample: https://stackblitz.com/edit/angular-y6g5bk-gzdmyq?file=app.component.ts 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth

Nevitha Ravi · Answer

Hi Lorryl, 

Greetings from Syncfusion Support. 

Currently it is not feasible to drag and drop between two kanbans or drag and drop from a external source. So we consider this as feature request which can be tracked from the following link. 
https://www.syncfusion.com/feedback/20705/provide-support-for-external-drag-and-drop  

The feature will be implemented in our volume 1, 2021 main release. Please be patience until then. 

Regards, 
Nevitha

Indrajith Srinivasan · Answer

Hi Lorryl, 
 
Thanks for your patience, 
 
We have provided the support  for “Drag and drop cards from external source” with the package version 19.1.54. Check the below links for reference. 
 
Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/19.1.54/?type=all#kanban 
 
Can you please upgrade your package to this version to use the support provided? Regards,Indrajith

lorryl · Answer

Hi,I'm trying to test this new feature, but I found a lot of errors in this document. And I cannot find any update in the kanban demo.Please check.https://ej2.syncfusion.com/angular/documentation/kanban/drag-and-drop/#kanban-to-kanban

Indrajith Srinivasan · Answer

Hi Lorryl, 
 
Sorry for the inconvenience caused, 
 
We have validated your reported query. We will correct the documentation samples from our end, on or before 20th April, and will let you know once the changes are published in live. We have prepared a sample meeting your requirements, performing the drag and drop between the Treeview and Kanban component 
 
Sample: https://stackblitz.com/edit/angular-sg5mhn-veybe1?file=app.component.ts 
 
Can you please check the above sample, and let us know if you face any difficulties? 
 
Also, we will include the demo samples for the Kanban component on our upcoming releases. 
 
Regards, 
Indrajith

Revanth Krishnan · Answer

Hi Lorrly, 
 
Sorry for the inconvenience. 
 
We are still not corrected the documentation section for the schedule to Kanban drag and drop section alone, other section samples are corrected and published. 
Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/drag-and-drop/#kanban-to-kanban 
 
We will correct the schedule to Kanban drag and drop documentation section samples from our end, on or before 27th April, and will let you know once the changes are published in live. 
We appreciate your patience till then. 
 
Regards, 
Revanth

lorryl · Answer

Hi,I do a demo, that can drag the data from Kanban A to Kanban B, and the Kanban B have the swimlane setting, please see the attach file.1. How to let the dropped data direct to the specific swimlane？I means let the "6" card to "Andrew Fuller".2.  If I set the swimlaneSettings keyField is noneexistent field, and set showUnassignedRow is true.code:public swimlaneSettings: SwimlaneSettingsModel = { keyField: 'Test', allowDragAndDrop: true, showEmptyRow: true, showUnassignedRow: true };After I drag card "6" to Kanban B, it get below error.Attachment: kanbandemo_88d91217.rar

Indrajith Srinivasan · Answer

Hi Lorryl,

Good day to you,

We have validated your reported queries,

Query 1: “How to let the dropped data direct to the specific swimlane？”

If the Kanban with swimlaneSettings is enabled, will order the cards based on the keyfield assigned. You can achieve your requirement with the Drag and Drop, by changing the target to the particular swimlane element target instead of Kanban as target and update the card data based on the keyfield specified to place the card in specific swimlane. Check the below shared code blocks for reference.

onKanbanADragStop(args: DragEventArgs) {

let kanbanBElement: Element = <Element>closest(args.event.target as Element, '#KanbanB');

let kanbanBSwimElement = <Element>closest(args.event.target as Element, '.e-content-row');

if(this.swimlaneSettings.keyField && kanbanBSwimElement.previousElementSibling.getAttribute('data-key')) {

args.data[0][this.swimlaneSettings.keyField] = kanbanBSwimElement.previousElementSibling.getAttribute('data-key')

}

if (kanbanBElement || kanbanBSwimElement) {

this.kanbanObjA.deleteCard(args.data);

this.kanbanObjB.addCard(args.data, args.dropIndex);

args.cancel = true;

}

};

Query 2: “If I set the swimlaneSettings keyField is noneexistent field, and set showUnassignedRow is true. After I drag card "6" to Kanban B, it get below error.”

We have validated the reported issue and have considered the reported issue “Script error is raised with the drag & drop action, when swimlaneSettings keyField is a non-existent field” as a bug from our end. We will include the fix for the reported issue, with our May 11th patch release. We appreciate your patience until then.

You can track the status of the reported issue from the below feedback link: https://www.syncfusion.com/feedback/24706/

Please get back to us if you face any difficulties,

Regards,

Indrajith

Revanth Krishnan · Answer

Hi Lorryl, 
 
The corrections for the Kanban drag and drop documentation section samples will also be corrected with our patch release on 11th May 2021. 
 
We appreciate your patience till then. 
 
Regards, 
Revanth

lorryl · Answer

Hi,At first the kanban has the swimlaneSettings, when I click a button, I want to clear the swimlaneSettings, meaning not need the group any more.When I call "this.kanbanObj.swimlaneSettings = null;" and "this.kanbanObj.refresh();", it not working.Please help me.