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

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,

Jiway

Reply | Reply with quote

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;

}

}}/>

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

Reply | Reply with quote

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,

Jiway

Reply | Reply with quote

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'

}

}}

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

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150022	Dec 18,2019 08:05 AM UTC	Dec 20,2019 08:02 AM UTC	React - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US