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

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

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

3 Replies

SG Shyam G Syncfusion Team December 18, 2019 08:42 PM

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; 
         
        }}/> 
 
 
 

Regards, 
Shyam G 



DT Dominique Toussaint December 19, 2019 06:44 AM

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


SG Shyam G Syncfusion Team December 19, 2019 09:12 PM

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' 
               
              }} 


Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon