Setting DataGrid row color

Support
#1

Hello,
Jmix 2.2.3, please help me with DataGrid row coloring problem.
I want to set the grid row’s color based on the DTO dataset’s integer value.
Example project source GitHub - mbucan/gridrowcolor

The code itself seems to be working
image

is it the problem with CSS style in the theme modification?
I have tried with

.priority-9 {
    background-color: #ffffff; !* White *!
}

which should be working, I tried some different approaches like

vaadin-grid::part(cell) ::slotted(vaadin-grid-cell-content.priority-9) {
    background-color: #ffffff; /* White */
}

but can’t make it work.

Kind regards,
Mladen

#2

Hi, Mladen!

Try to use setting style with setPartNameGenerator method.

        dataGrid.setPartNameGenerator(data ->
            switch (data.getPriority()) {
            case 1 -> "priority-1";
            case 2 -> "priority-2";
            case 3 -> "priority-3";
            case 4 -> "priority-4";
            case 5 -> "priority-5";
            case 6 -> "priority-6";
            case 7 -> "priority-7";
            case 8 -> "priority-8";
            default -> "priority-9";
        });

The CSS will be:

vaadin-grid::part(priority-9) {
    background-color: #ffffff; /* White */
}
vaadin-grid::part(priority-8) {
    background-color: #b6d7a8; /* Light green */
}
vaadin-grid::part(priority-7) {
    background-color: #b9ffff; /* Light blue */
}
vaadin-grid::part(priority-6) {
    background-color: #8282ff; /* Light purple */
}
vaadin-grid::part(priority-5) {
    background-color: #ff00ff; /* Magenta */
}
vaadin-grid::part(priority-4) {
    background-color: #ffe599; /* Light yellow */
}
vaadin-grid::part(priority-3) {
    background-color: #ffff00;/* Yellow */
}
vaadin-grid::part(priority-2) {
    background-color: #ffb5b5;/* Light red */
}
vaadin-grid::part(priority-1) {
    background-color: #ff0000;/* Red */
}

image

#3

This works, thank you Pavel !

Kind regards,
Mladen

1 Like