Vaadin flow: сетка условного цвета фона

Question

хочу покрасить линии сетки, в зависимости от условия.Я пытаюсь это:

Java:

gridEtudiant.setClassNameGenerator(t -> {
    if (t.getEtud_numero().startsWith("2")) {
        return "error_row";
    }
    return "";
});

Css:

td.error_row {
  background-color: red;
}

HTML

<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>

Мы можем видеть "класс ="error_row "", но он не окрашен в красный цвет.

Версия Vaadin - 13.0.1

Answer 1

Ваш код Java выглядит хорошо.

Убедитесь, что у вас есть html-файл типа webapp/frontend/styles/shared-styles.html, содержащий что-то вроде:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            [part~="cell"].error_row {
                background: red;
            }
        </style>
    </template>
</dom-module>

Если ваш макет содержит сетку, помеченную @HtmlImport("frontend://styles/shared-styles.html") (которую вы уже используете, поскольку ваш пользовательский класс CSS уже применен), он должен работать.

Пример:

grid.addColumn(Customer::getFirstname).setHeader("Firstname");
grid.addColumn(Customer::getLastname).setHeader("Lastname");
grid.addColumn(Customer::getEmail).setHeader("Email");
grid.setClassNameGenerator(customer -> {
    if (customer.getFirstname().equals("Marco")) {
       return "error_row";
    } else {
       return "";
    }
});

становится: