How to add class and change the background-color of the node?

[Aravinda93]

I am using the Drawflow to develop an application within that I would like to highlight some nodes when it contains some wrong information. So I am adding the class highlightNode when there are some error to drawflow nodes but for some reason the node color is not changing even after adding the class. However, when I check the information related to drawflow: this.$df.drawflow.drawflow.Home.data then I see that class is highlightNode so meaning that class value is changed but the css is not kicking in for some reason.

For the sample recreation I have added the project in codesandbox.

In this application, initially the nodes will have the class identifiersNode with background:green but after clicking on the submit button I am changing the class to highlightNode for all nodes and for this class I have added the backgound:red within the @assets/css/drawflow.css so I would expect the Node to take the color red but its not working.

@jerosoler Can you please provide some suggestion or work arounds?

[jerosoler]

Hello,

The problem is that when you are adding the class, it only does it in the JSON and not in the DOM tree.

You have to add the class to the element as well with ...classList.add(''highlightNode");

[Co-Maheshh]

Can you give example how to add class for setting background color of node.

[Aravinda93]

@Co-Maheshh You can look into this and get an idea on the same maybe, I have an example for this on CodeSandBox.