[Solved] Change Text Color in Grid Cell conditionally

Vaadin 23.3.12
I have a column containing a Date (with LocalDateTimeRenderer) and want the “date text” changing color if shown date is “today”.

Seems I need some help :thinking:

I have tried column.addClassNameGenerator and check about date and today (that works) and want set the classname, but I don’t see changes within the view.

How the “grid-cell-content-color-if-today.css” has to look to make it work?

Have you tried something like this? : https://cookbook.vaadin.com/dynamic-grid-cell-background-color

To change the text color, I’d try overwriting color for the cell where in the example the background-color is set.

:+1: there’s another example of that here: https://vaadin.com/docs/v23/components/grid/#styling-rows-columns

How to load the styles into the appropriate element depends on whether you’re using @CssImport or the theme folder system

seems my "wording in CSS isn’t the expected one…
I have found and used the mentioned cookbook example.

I have a column:
Column<Voranmeldung> columnEta = voranmeldungGrid.addColumn(new LocalDateTimeRenderer<>(Voranmeldung::getEta, "HH:mm dd.MM.yyyy")).....

and on that column I set the ClassNameGenerator:
columnEta.setClassNameGenerator(va -> va.getEta().getDayOfYear() == LocalDateTime.now().getDayOfYear() ? "today" : null);

similar to the cookbook example. Check if today or not today works.

The CSS File get’s imported with
@CssImport(value = "./styles/grid-cell-content-color-if-today.css", themeFor = "vaadin-grid")

and (just as in the example) only contains
.today { color: yellow; }

I have tried also background-color without any visible effect, and I guess it should better be something considering the “part” selector but such is beyond my poor styling knowledge… :woozy_face:

does your css contain the required dot in front of today?

also for debugging purposes, you can just set your classNameGenerator to a fixed value until you’re sure the css works. e.g columnEta.setClassNameGenerator(va -> "today");

yes it does have a dot, sorry, Copy&Paste …

yes I have tried the “fixed value” but it has no effect at all… not sure, might it have to do with the DateTimeRenderer as it is “different” from the usuals Strings within the other grid cells?

Geeze… :person_facepalming:

now it works.
I had to put brackets into the Lambda…
columnEta.setClassNameGenerator(va -> (va.getEta().getDayOfYear() == LocalDateTime.now().getDayOfYear()) ? "today" : null);

But I don’t have any idea why previously it had no effect when setting the class name to a fixed value!

Thanks everyone for guessing with me :slightly_smiling_face:

[Solved] Change Text Color in Grid Cell conditionally