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.
Unfortunately, activation email could not send to your email. Please try again.

Add connector to nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

121750 Jan 21,2016 10:15 AM Jan 25,2016 12:01 AM JavaScript 4
loading
Tags: ejDiagram
Luis B.Chicaiza
Asked On January 21, 2016 10:15 AM

Hello, i'm working with Diagram in JS. i am dragging the first node diagram and then when i drag next node i want to add a connector between the first node and the new node dragged to Diagram. Could you please help me with the code to do that?

Thank you so much

Shyam G [Syncfusion]
Replied On January 22, 2016 01:08 AM

Hi Luis,

Please use drop event to achieve your requirement. please refer to the code example and JSPlayground link below.

Code example:

$("#diagram").ejDiagram({

            //define drop event

            drop:drop,
        });

var lastNode = null;

        function drop(args) {

            var diagram = $("#diagram").ejDiagram("instance");          

            if (lastNode === null) {

                lastNode = args.element;

            }

            else {

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId, sourceNode: args.element.name, targetNode: lastNode.name })

                lastNode = args.element;

            }
        }

JSPlayground link:http://jsplayground.syncfusion.com/we5d131n

In the above sample, we have used drop event to establish the connection between the node. Also we have an additional feature in the diagram such as AllowDrop constraints for the node. By enabling this constraints, when we drag the node and mouse hover on the another node within the diagram, the highlighter shows on the node(mouse hover node). In the drop event, you can get the highlighter node as a args.target. Using this target element, you can establish the connection between the dropped node and the target node. Also when we drag the node from the symbol palette and drop it into the another node in the diagram, you can get the target in the dragOver event and establish the connection in the drop event. Please refer to the code example.

Code example:

$("#diagram").ejDiagram({

            //define dragOver event

            dragOver: dragOver,             

            //define drop event

            drop:drop,
        });

  var target = null;

        function dragOver(args) {

            var diagram = $("#diagram").ejDiagram("instance");           

            target = args.target;                

        }

 

        function drop(args) {

            var diagram = $("#diagram").ejDiagram("instance");

            if (args.target && diagram.getObjectType(args.target) == "node" || diagram.getObjectType(target) == "node") {

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId, sourceNode: args.element.name, targetNode: args.target.name?args.target.name:target.name })

            }

            target = null;
        }
Regards,
Shyam G


Luis B.Chicaiza
Replied On January 22, 2016 08:55 AM

Hello Shyam,

Thanks for you answer, it works, but, what i want too is keep the connectors in the nodes, i mean, i drag the first one, then the second one generates its connector, if i drag a third one i want to keep the first connector and add a new one connector to the new dragged node. In this way we keep the connections always. Is there any way to achieve this behavior?

Thanks

Shyam G [Syncfusion]
Replied On January 24, 2016 11:56 PM

Hi Luis,

We suggest you to add a new connector with different name to achieve your requirement. We have modified the JSPlayground link and provided below.

JSPlayground link:http://jsplayground.syncfusion.com/0tvmectd

Regards,
Shyam G

Shyam G [Syncfusion]
Replied On January 25, 2016 12:01 AM

Hi Luis,

Please ignore our previous update.

We suggest you to add a new connector with different name. We have modified the JSPlayground link and provided below. Please refer to the code example below

Code example:

        function drop(args) {

                                                . . . . .

                                                . . . . .

                diagram.add({ name: "connect1" + ej.datavisualization.Diagram.Util.randomId(), sourceNode: args.element.name, targetNode: lastNode.name })

                                                . . . . .

 
        }

JSPlayground link:http://jsplayground.syncfusion.com/0tvmectd

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.

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.

;