How to color a grid row conditionally in Vaadin 8?

Question

I want to change the color of a Vaadin grid row based on a value of a cell. I tried it as follows and did not work.

SCSS

@import "mytheme.scss";
@import "addons.scss";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {
     @include addons;
     @include mytheme;

     .v-grid-row.error_row {
            // Tried following elements and didn't work.
            // background-color: red !important;
            // color: blue !important; // This changed the color of the font.
            background: green !important;
     }
}

Java Code

grid.setStyleGenerator(t -> {
            if (t.getLogLevel().trim().equals(ERROR) || t.getLogLevel().trim().equals(WARN)) {
                return "error_row";
            } else {
                return null;
            }
        });

Note: I check the css from the browser's developer tools and that shows the css is updated properly (See the below image).

Kowalczyk

I expected to see in java code xxx.addStylename("howitscalled"); – Pyroxylin

I mean you only set how lines will be presented in a grid row. But WHAT color they will be represented - thats another question. – Pyroxylin

I wonder why you have .mytheme nested into .mytheme in your SCSS? – Pisciform

@Reborn - I just want to change the background color of the row and I have specified the color in the styles.scss file. – Kowalczyk

Maybe the background-color style is overwritten by cell's td style? Did you inspect the styles of a cell? – Pisciform

I'd recommend you to make additional css style for row backgorund and in java code after checkin condition use xxx.setStyleName("myGridColorName") and in addition use xxx.addStyleName to label, so it would not conflict (if any) – Pyroxylin

Answer 1

You need to overwrite the background-color of the row's TD element:

.v-grid-row.error_row > td {
    background-color: red;
}

By using your browser's style inspection you can see how Vaadin has implemented styles.

Pisciform

Sorry my bad, that solution works fine. Thanks a lot. – Kowalczyk

Indeed, this solution works for me too in Vaadin 8.6.0.beta1. Thank you. – Voltaic

Variation… To color only the second column, use nth-child selector: .v-grid-row.fresh_row > td:nth-child(2) { background-color: honeydew; } – Voltaic