Get and update a node

[Chad Carey]

I am using a diagram to create a org chart. I want to update a single node's data using javascript. How can I get a single node from t he diagram from the node's ID and update the underlying data in it and then push that change to the diagram?

[Gowtham Gunashekar]

Hi Chad , 

 

We have added sample link to demonstrate how to get node by id and change the node property and bind the changes in the diagram. 

 

Code snippet: 

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

        for (var i = 0; i < diagram.nodes.length; i++) { 

            if (diagram.nodes[i].shape.content ==="Assistant General Manager") { 

                diagram.nodes[i].style.fill = "red"; 

            } 

        } 

        diagram.dataBind(); 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ORGchanrtnodeUpdation-1071132667 

 

Regards, 

Gowtham  

 

[Chad Carey]

so I am trying to change the data of the node and that doesn't seem to work.

I get the right node. Set the node.data.whatever = "something"

do a diagram.dataBind() and it does not up date the node.

[Gowtham Gunashekar]

Hi Chad, 

 

We don’t have databinding support of the custom property which is added in the node.data. however we can reset the entire datasource and call refersh API, it will completely re-render the diagram. As we mentioned earlier, we suggest you, to directly update the node property and perform the databinding is the optimistic way to update the node and connector dynamically.  

 

Code snippet: 

 

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

var node = diagram.getObject(“node1”); 

node.style.fill = "red";  

diagram.dataBind();  

 

 

Regards, 

Gowtham