How to change row bg-color in Vaadin when condition is met?

Question

I am using Vaadin v23 and I am trying to change bg-color of a row when certain condition is met, like below:

grid.setClassNameGenerator(row -> row.getRemoved() ? LumoUtility.Background.CONTRAST : "");

Why doesn't it work?

I tried to do it with custom .css file and it works, but I would prefer to use built-in CONTRAST style.

grid.setClassNameGenerator(row -> row.getRemoved() ? "grid-row-removed" : "";

@SimonMartinelli in imported .css file like this .grid-row-removed { .background-color: blue; } — Burak, Dec 06 '22 at 12:46

score 4 · Accepted Answer · answered Dec 06 '22 at 13:08

4

The problem is that the CSS must be in the scope of the grid.

So you must define the class in /frontend/themes/<your theme>/components/vaadin-grid.css

Then you could do it like this:

.grid-row-removed {
    background-color: var(--lumo-contrast);
}

answered Dec 06 '22 at 13:08

Simon Martinelli

1

I'd like to add that, in general, `LumoUtility` classes are intended for layouts and native HTML elements, not for Vaadin components or their parts (such as, in this case, Grid cells). – Rolf Dec 07 '22 at 09:14
Guys, how can I import LumoUtility into my .css file? My Intellij editor doesn't see --lumo-contrast. – Burak Dec 07 '22 at 13:19
You can't lumo-contrast ist not from LumoUtility but a CSS3 variable from Lumo – Simon Martinelli Dec 07 '22 at 13:20
@SimonMartinelli how do I make my .css file see --lumo-contrast then? – Burak Dec 07 '22 at 13:27
1

You mean the IDE or editor does not see this. And this is also not possible that the IDE sees it – Simon Martinelli Dec 07 '22 at 13:30
1

You'll find all the available variables here https://vaadin.com/docs/latest/styling/lumo/design-tokens – Simon Martinelli Dec 07 '22 at 13:32

1 Answers1