Automatic Connection Diagram

Question

Good afternoon!

To connect components with connector, we must drag the connector on the symbol palette diagram, and then place the head and tail close to the connector. Is it possible to have an automatic connection behavior, ie when I add a picture it already makes the connection automatically with the previous figure?

Or something like that where I do not have to drag the connector?

Thank you!

Shyam G · Answer

Hi Maysa, 
 
Please use nodeCollectionChange event to achieve your requirement. please refer to the code example below. Also please refer to the video below in which we have shown how the connection established automatically between the nodes when you drag and drop the node form palette onto the diagram. 
 
Code example: 
 
//define nodecollectionchange event 
            model.NodeCollectionChange = "nodecollectionchange"; 
 
var sourceNode,targetNode; 
    function nodecollectionchange(args) { 
        if (args.state === "changed" && args.cause==="drop") { 
            var diagram = $("#diagram1").ejDiagram("instance"); 
            if (sourceNode) { 
                targetNode = args.element; 
                //add new connector to establish connection between nodes 
                diagram.add({ name: "connect" + ej.datavisualization.Diagram.Util.randomId(), sourceNode: sourceNode.name, targetNode: targetNode.name }); 
                sourceNode = null; targetNode = null; 
            } 
            if (!sourceNode) { 
                sourceNode = args.element; 
            } 
           
        } 
    } 
 
Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/nodecollectioneventvideo-2099936380 
 
Regards, 
Shyam G

maysa · Answer

Good afternoon! Thank you  for the answer. This code solved my problem! Best regards!

Shyam G · Answer

Hi Maysa, 
We are happy to hear that your problem is resolved. 
Regards, 
Shyam G