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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to reproduce

Thread ID:

Created:

Updated:

Platform:

Replies:

151055 Jan 29,2020 12:55 PM UTC Jan 30,2020 05:20 AM UTC Angular - EJ 2 1
loading
Tags: Diagram
Gaylord Petit
Asked On January 29, 2020 12:55 PM UTC

Hi,

I need to reproduce exactly the same think like :
(the last part with drag and drop)

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

Thanks for your help

Shyam G [Syncfusion]
Replied On January 30, 2020 05:20 AM UTC

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);  
  }  
 
 
 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon