13

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

Hiran Perera
  • 736
  • 1
  • 5
  • 18
  • I expected to see in java code xxx.addStylename("howitscalled"); – Malakai Jun 30 '17 at 08:55
  • I mean you only set how lines will be presented in a grid row. But WHAT color they will be represented - thats another question. – Malakai Jun 30 '17 at 08:57
  • I wonder why you have .mytheme nested into .mytheme in your SCSS? – Steffen Harbich Jun 30 '17 at 09:01
  • @Reborn - I just want to change the background color of the row and I have specified the color in the styles.scss file. – Hiran Perera Jun 30 '17 at 09:01
  • Maybe the background-color style is overwritten by cell's td style? Did you inspect the styles of a cell? – Steffen Harbich Jun 30 '17 at 09:04
  • 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) – Malakai Jun 30 '17 at 09:08

1 Answers1

15

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.

Steffen Harbich
  • 2,639
  • 2
  • 37
  • 71