Drag and drop connector from Node

[irwan azam ahmad]

Hi guys

I wanted to connect two nodes using connecter but instead to drag connector from symbol pallette, i would like to drag connecter directly from one node to another node.

Tq

[Senthil Kumar Venkatesan]

Hi Irwan,
You can achieve this requirement by using two ways .

you can set port to all the node and set the port constraints as “Draw” so the you can draw connectors from all the ports of all the nodes.

Please find the snippets for the following

>>>>>>>>>>>>

List < DiagramPort > ports1 = new List < DiagramPort > ();

ports1.Add(new CustomPort() {Id = "port1",Constraints = PortConstraints.Draw,Offset = new DiagramPoint() {

X = 0.5, Y = 0.5

}

});

List < DiagramNode > nodes = new List < DiagramNode > ();

nodes.Add(new Node() {

Id = "node1",

//..

//..

Ports = ports1

});

ViewBag.nodes = nodes;

>>>>>>>>>>>>

We can set the the drawing tool as DrawOnce or ContinousDraw and set drawing object as connector so that we can establish the connector from one node to another node.

Please find the snippet for the following

>>>>>>>>>>>>>>>>>

<ejs-diagram id="diagram" width="1000px" height="1000px" tool="ContinuousDraw"created="diagramCreated" ></ejs-diagram>


function diagramCreated() {

var diagram = document.getElementById("diagram").ej2_instances[0];

var connector = {type: "Orthogonal"};

diagram.drawingObject = connector;

diagram.dataBind();

}

>>>>>>>>>>>>>>>>>

Regards,

Senthil Kumar V

[irwan azam ahmad]

Hi Senthil

Thank you very much, I'm able to drag connector from one node to another node but have another requirement. Currently when using continuos draw I cannot move node anymore after connect with the connector.

[Senthil Kumar Venkatesan]

Hi Irwan, 

In tool instead of enabling “ContinousDraw ” we can enable “DrawOnce” so that you can draw connector once in between the nodes. If you need “ContinousDraw” tool to be enabled then you can change  the tool by any button click once the connectors has been drawn . 

  

Regards, 

Senthil Kumar V 

 

[Senthil Kumar Venkatesan]

Hi Irwan,
As per your requirement ,You can add port for the node and enable “Draw” for the port constraints so that you can draw the connectors from the nodes and also you can select and drag the node . If you enable “ContinousDraw” then as per the functionality you cannot able to select the node you can continuously draw the connectors from one point to another and you can disable the too by any button click .We had provided the code snippet of how to enable the port Costraints in the previous update . Kindly find the UG diagram document for your reference .
Link:PortLink
Link:ToolLink  

  

Regards, 

Senthil Kumar V