Поток Vaadin: условный цвет фона сетки

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

Джава:

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>

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

Версия Ваадина 13.0.1.

vaadin-grid vaadin-flow vaadin10

09.04.2019 06:15

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 758

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 "";
    }
});

становится: