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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





150022 Dec 18,2019 08:05 AM UTC Dec 20,2019 08:02 AM UTC React - EJ 2 3
Tags: Diagram
Dominique Toussaint
Asked On December 18, 2019 08:05 AM UTC

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,

Shyam G [Syncfusion]
Replied On December 19, 2019 04:42 AM UTC

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; 

Shyam G 

Dominique Toussaint
Replied On December 19, 2019 02:44 PM UTC

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,

Shyam G [Syncfusion]
Replied On December 20, 2019 05:12 AM UTC

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' 

Shyam G 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon