Update connector text programmatically

Question

Hi there,I just wanted to update connector text when i drag from one node to another. I just wanted have some text over it at that time.

Shyam G · Answer

Hi Ahman, 
 

When you have enabled the AllowDrop in NodeConstraints for nodes and then when you drag the node and drop into another node, the drop event gets raised.
In this event, you get an dragged node object from args.element property and the target node in args.target property.
You can update the text using diagram client side updateLabel method. we have created a sample in which we have updated the text for the dragged node. please refer to code example, playground link and  help documentation below.
 
Code example: 
 
   $("#diagram").ejDiagram({ 
                    //define drop event 
                    drop: drop, 
                   defaultSettings: { 
                        //enable allowdrop constraints 
                        node: { constraints:ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.AllowDrop }, 
                    }, 
                }); 
 
function drop(args) { 
        var diagram = $("#diagram").ejDiagram("instance"); 
        if (args.target) { 
            //update text for selected node or dragged node 
            diagram.updateLabel(args.element.name, args.element.labels[0], { text: "decision" }); 
        } 
      } 
 
Playground link: https://jsplayground.syncfusion.com/eyes3dnm 
 
Help documentation: 
 
Here is the documentation for updatelabel method 
 
https://help.syncfusion.com/api/js/ejdiagram#methods:updatelabel 
 
Here is the documentation for drop event 
 
https://help.syncfusion.com/api/js/ejdiagram#events:drop 
 
Regards, 
Shyam G

ahman · Answer

Hi, Actually i was not talking about nodes. I'm talking about connectors. With the help of user handle when i create connector between two nodes. i want update connector text. not node.

Naganathan Ganesh Babu · Answer

Hi Ahman, 
 
The ConnectorCollectionChanged event has been triggered while establishing the connection between the nodes. When the ConnectorCollectionChanged event’s state is in “changed”, you can create/update the labels for the nodes. Please refer to the below code example. 
 
Code example: 
 
function connectorCollectionChange(args) { 
    if (args.state === "changed" && args.changeType === "insert") { 
        if (args.element.labels.length > 0) { 
            diagram.updateLabel(args.element.name, args.element.labels[0], { text: "connector1" }); 
        } else { 
            diagram.updateLabel(args.element.name, { text: "connector1" }); 
        } 
    } 
}  
 
Regards, 
 
Naganathan K G