TREEGRID CSS

I am trying to highlight a treegrid row to a different color when a condition is met. I’ve read the Vaadin 8 treegrid documentation and it stated the css properties are similiar to that of a grid. I use the following scss definiton for both grid and treegrid:

.v-grid-row.error {
    color: red;
}

.v-treegrid-row.error {
    color: red;
}

For the row style, I have the following code:

[code]
[code]
tree.setStyleGenerator(row -> {
   if (row.getErrors().size() > 0) {
      return "error";
   }

   return null;
});
[/code]
[/code]

The grid css works fine, however, does not for treegrid.
Any assistance is greatly appreciated.

Hi,

is the style name applied to the DOM? If you run the code in a debugger, is the style generator lambda function hit at all?

-Olli

Yes, the style generator lambda function does hit. I also purposely inserted an error description to the error line so it shows the error. Both works but the error css does not.

Thanks.

How about does the “error” class name get update to the DOM? That is, if you look at the row in the browser inspector, does it have that class name? I’m trying to figure out if the problem is in the CSS or if there’s a bug in the style generator.

-Olli

Hi Olli,

Thank you for taking the time to respond. I don’t believe there is a bug in the style generator. I launched the app today and the treegrid row is now highlighted in red correctly.

N1~SE~CHEVRON U.S.A. INC.~49~XXXXXXXX

And also thank you for suggesting the DOM inspector, it really helps with the troubleshooting.

40909.png

Okay, possibly this was just a case of needing to refresh the browser cache or something. Good to hear it’s now working correctly.

-Olli