How to reproduce

[Gaylord Petit]

Hi,

I need to reproduce exactly the same think like :

https://www.syncfusion.com/angular-ui-components/angular-diagram/organizational-chart

(the last part with drag and drop)

 but i don't know how can i do that... (angular)

Thanks for your help

[Shyam G]

Hi Gaylord, 

 

• We should enable AllowDrop Constraints which shows highlighter when we drag a node and hover it on the another node in diagram.
• You can drop the node once the highlighter has been displayed. When you drop a node on the another node, the drop event is initiated.
• In this event, you can establish a connection between the node dropped. Refer to the instance code below and the sample below.

 

Code example: 

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' (drop)="onDrop($event)"[snapSettings]='snapSettings'>    

 

 //Defines the default node properties 

    public nodeDefaults(obj: NodeModel): NodeModel { 

       

        //AllowDrop Constraints  

        obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;   

  

        return obj; 

    }; 

 

//drop event 

  public onDrop(args: any): void {   

   setTimeout(()=>{    

    let connector: ConnectorModel={}; 

    if (args.element && args.target) { 

      if (args.element) { 

        //get an connector object  

         connector = this.diagram.getObject(args.element.inEdges[0]); 

      } 

      // this block executed when we drag any node in diagram and drop it onto the another node 

      if (connector) { 

        //update connector source and target id  

        connector.sourceID = args.target.id; 

        connector.targetID = args.element.id; 

        this.diagram.dataBind(); 

      } else { 

        // this block executed when we drag  node in palette and drop it onto the node in diagram 

        this.diagram.add({id: 'connector' + randomId(), sourceID: args.target.id, targetID: args.element.id});    

        this.removeElementsByClass('e-diagram-highlighter')  

      }  

      //To update an layout  

      this.diagram.doLayout(); 

    } 

    }, 100);  

  }  

 

Sample: https://stackblitz.com/edit/angular-wsvsvc-cjps79?file=app.component.ts 

 

Help documentation for layout: https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout/?no-cache=1#organizational-chart 

 

Regards, 

Shyam G