Best way to change the style of the node once getNodeDefaults is already executed

[Dominique Toussaint]

What would be the best way to change the style of the node once getNodeDefaults is already executed? I am interested in changing the border color of the node in componentDidUpdate life cycle method, because there are no class names for nodes in diagram. If you can share some sample of the code?

Best regards,

Jiway

[Shyam G]

Hi Jiway, 

At runtime, we can use the diagram events to track the changes in the diagram. Please use diagram click event to change the node strokeColor. This event triggers when you click on a diagram element. Please refer to a code example, help documentation and the sample below. 

Code example: 

<DiagramComponent id="diagram" width={"100%"} height={"700px"} 

click = {(args)=> { 

          let node = args.element;  

          if(node.shape && node.shape.type === 'Flow') { 

            //change borderColor 

            node.style.strokeColor = 'red'; 

            node.style.strokeWidth = 3; 

          } 

        }}/> 

 

 

Sample: https://stackblitz.com/edit/react-zitnsj-e18zof?file=index.js 

 

Help documentation: https://ej2.syncfusion.com/react/documentation/api/diagram/#click 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

is there a way to simulate a click on each individual diagram element at the componentDidMount and change the border color only for node elements of the diagram? Better question is how can I iterate through diagram elements because I have found a way to simulate a click using document.getElementById().click() function? And id's which I get from each individual node from this.diagram.nodes is not the proper id of the element it seems, also I tried to add a suffix string to the id "_content_html_element" but args parameter in click function still doesn't have element property in it.

Best regards,

Jiway

[Shyam G]

Hi Jiway, 

We have created a sample in which we have shown how to iterate the nodes collection in the created event. This event triggers when the diagram component is created. Please refer to  a code example and the sample below. 

Code example: 

   created={(args) => { 

                //get a nodes collection 

                let nodes = diagramInstance.nodes; 

                //iterate a node collection 

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

                  let node = nodes[i]; 

                  node.style.strokeColor = 'red' 

                } 

              }} 

Sample: https://stackblitz.com/edit/react-zitnsj-ff3byw?file=index.js 

Regards, 

Shyam G