Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to color a grid row conditionally in Vaadin 8?

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).

enter image description here

like image 303
Hiran Perera Avatar asked Jun 30 '17 08:06

Hiran Perera


1 Answers

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.

like image 195
Steffen Harbich Avatar answered Nov 08 '22 14:11

Steffen Harbich