1. Home
  2. Forum
  3. Angular - EJ 2
  4. Is it possible to drag and drop between diagram and kanban components

Is it possible to drag and drop between diagram and kanban components

Hi, 

What I'd like is to have is an HTML node on my diagram which is a kanban board control. 

  • the ability to drag a node from my diagram and into the kanban board (removing the node and adding the kanban card) 
  • the ability to drag a card from the kanban control into the diagram 

Is this going to be possible?  I saw the examples of doing something similar with the kanban and treeview, kanban and scheduler controls

Here is a stackblitz of what I am trying https://stackblitz.com/edit/angular-rf8fsf?devtoolsheight=33&file=src/app/app.component.ts

Many thanks!  Geoff

6 Replies
GG Gowtham Gunashekar Syncfusion Team June 30, 2021 01:03 PM UTC

Hi Geoff, 
 
We are currently validating the query on our end, we will update you with further details on or before 2nd July 2021.  
  
We appreciate your patience till then.  
 
Regards, 
Gowtham 


GE Geoff June 30, 2021 11:44 PM UTC

Great, thanks for responding so quickly Gowtham.  Looking forward to hearing what is possible :-)


GG Gowtham Gunashekar Syncfusion Team July 1, 2021 01:53 PM UTC

Hi Geoff,  
  
Thanks you your updated. We are validating the query on our end, we will update you with further details on or before 2nd July 2021.   
   
We appreciate your patience till then.   
  
Regards,  
Gowtham  


GG Gowtham Gunashekar Syncfusion Team July 2, 2021 01:19 PM UTC

Hi Geoff,   
 
Please find the response at the below table. 
 
Query 
Response 
the ability to drag a node from my diagram and into the kanban board (removing the node and adding the kanban card)  
 
This can be achieved by find the target element in the drop event of the diagram and then using the target element finding the necessary card details required and then framing the data as Kanban data and using the ‘openDialog’ method of the Kanban to add the card in the Kanban. We have modified the shared sample for your reference, 
 
Code snippet: 
  public drop(args: IDropEventArgs) { 
    var currentTarget = document.elementFromPoint( 
      args.position.x, 
      args.position.y 
    ); 
    var content = (args.element as any).annotations[0].content; 
    if ( 
      currentTarget.closest('.e-content-row') && 
      currentTarget.closest('.e-content-cells') 
    ) { 
      var swimaLaneKey = currentTarget 
        .closest('.e-content-row') 
        .previousElementSibling.getAttribute('data-key'); 
      var keyField = currentTarget 
        .closest('.e-content-cells') 
        .getAttribute('data-key'); 
      const insertData: { [key: string]: Object }[] = [ 
        { 
          //Unique Id should be given here 
          Id: 'Task' + this.kanbanData.length++, 
          Status: keyField, 
          Assignee: swimaLaneKey, 
          Summary: content 
        } 
      ]; 
      (this.kanbanObj as any).openDialog('Add', insertData[0]); 
// to remove the diagram node 
      this.diagram.remove(); 
    } 
 
 
the ability to drag a card from the kanban control into the diagram 
We suggest you use the add API to add the node in diagram at runtime and use deleteCard API to remove the node from the Kanban component. we need to find out the diagram coordinate based on the muse pointe to add the node at the exact point to add the diagram node in that place. We have added that code in below code snippet. We have added the suggest change in the shared sample added below for your references. 
  
Code snippet: 
  onKanbanDragStop(args: DragEventArgs) { 
 
    let offsetY: number = 0; 
    let offsetX: number = 0; 
    // give the absolute clientX and clientY of the mouse pointer to find the diagram coordinates  
 
    offsetX = args.event.event.clientX; 
    offsetY = args.event.event.clientY; 
    let boundingRect: ClientRect = this.diagram.element.getBoundingClientRect(); 
    let position: Size = new Size(); 
    position = getRulerSize(this.diagram); 
    offsetX = 
      offsetX + 
      this.diagram.diagramCanvas.scrollLeft - 
      boundingRect.left - 
      position.width; 
    offsetY = 
      offsetY + 
      this.diagram.diagramCanvas.scrollTop - 
      boundingRect.top - 
      position.height; 
 
    offsetX /= this.diagram.scroller.transform.scale; 
    offsetY /= this.diagram.scroller.transform.scale; 
    offsetX -= this.diagram.scroller.transform.tx; 
// add the node in diagram using add API 
    this.diagram.add({ 
      width: 100, 
      offsetX: offsetX, 
      offsetY: offsetY, 
      height: 100, 
      annotations: [{ content: args.data[0].Summary }], 
      style: { fill: 'yellow' }, 
      constraints: NodeConstraints.Default | NodeConstraints.AllowDrop 
    }); 
 
// remove the node from kanban 
 
    this.kanbanObj.deleteCard(args.data[0].Id); 
  } 
 
 
 
 
 
 
Regards, 
Gowtham 


GE Geoff July 3, 2021 08:22 AM UTC

Fantastic, thats just what I was after.   


Thanks very much Gowtham 


GG Gowtham Gunashekar Syncfusion Team July 5, 2021 10:03 AM UTC

Hi Geoff, 
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
 
Regards  
Gowtham 


Loader.
Up arrow icon