Changing color of TreeGrid if content match

Flow
1

Hello, I’m using Vaadin 24 and Flow

I’m trying to change the color of a cell if the content match a criteria.
I tried by using .setClassNameGenerator(), like this

this.treeGrid.setClassNameGenerator(item -> {
    if (item.varName != null && item.varName.startsWith("[") && item.varName.endsWith("]"))
        return "highlighted";
    return null;
});

And added the class in my styles.css

.highlighted {
    background: red;
}

But it doesn’t work.
I checked through Inspect Element, and I do have cases where it highlighted is applied

<td id="vaadin-grid-cell-79" role="gridcell" tabindex="-1" part="cell body-cell odd-row-cell expanded-row-cell drag-disabled-row-cell drop-disabled-row-cell" style="width: 15%; flex-grow: 0; order: 20000000;" class="highlighted"><slot name="vaadin-grid-cell-content-79"></slot></td>

I am able to change the color of all cells, like this

vaadin-grid::part(cell){
    background: red !important;
}

But cannot find how to change if it matches a criteria
I tried multiple ways like:

vaadin-grid::part(cell) .highlighted {
    background: red !important;
}
vaadin-grid[class="highlighted"]::part(cell) {
  background: red !important;
}
.highlighted::part(cell) {
    background: red !important;
}
.highlighted {
    background: red;
}

But none of it worked

2

Found my answer here Why deprecate Column.setClassNameGenerator in 24.5.0?

My issue is that I was using setClassNameGenerator() instead of setPartNameGenerator()
In the CSS I had to use this one

vaadin-grid::part(highlighted) {
    background: var(--lumo-error-color-10pct);
}

This do what I wanted → Changing the color of the cell if the cell meet a Criteria

I haven’t found how to properly use setClassNameGenerator() though

3

The class name generator of the grid works inside the shadow dom. Thus you have to apply the stylings for that to the shadow dom styling, too. Since shadow dom styling is nowadays discouraged to use, the product team decided to integrate part name generators and with them allowed light dom styling with the ::part selector.

To use the class names, generated by the CNG, you can simply create a dedicated css files inside your theme (.../themes/your-theme/components/vaadin-grid.css and there you can then use the class names, for instance

td.highlighted {
 ... 
}
1 Like
4

I see,
So it is better to use setPartNameGenerator() instead of setClassNameGenerator() ?

5

PartNameGenerator will make your life a bit easier, yes

2 Likes