Grid / Tree Grid Style not applied

General
1

Hi, i try to style my tree grid like following.

The red lines, should be completely red background (the exapanded once)
therefor i tried in vaadin-grid-layout.css

vaadin-grid::part(expanded-row){
    color: var(--main-color);
    font-width: 800;
}}

The header i would also like to change the background color.

Does anyone has an idea of whats going on? The doku mentioned that the expanded rows are vaadin-grid::part(collapsed-row)

but there is no hint to the header

image
image1743×342 15 KB

2

I’m guessing you’ve taken that expanded-row part name from the jsdoc rather than the online documentation? I recommend using the online styling docs instead: https://vaadin.com/docs/latest/components/grid/styling

Mentioned there, amongst other things, are:

Note: To set background colors based on row selectors, use the --vaadin-grid-cell-background style property

and

vaadin-grid::part(expanded-row-cell)

So there’s two ways to apply background color:

  1. Using vaadin-grid::part(expanded-row) { --vaadin-grid-cell-background: red; }
  2. Using vaadin-grid::part(expanded-row-cell) { background: red; }

As for the header row, there’s vaadin-grid**::part(header-cell)**

(and btw the css color property is for text color, not background color, and there is no such property as font-width, perhaps you meant font-weight?)

3

Hi Rolf, oh yeah thank you! font-weight :D

That CSS works well, thank you!

4

Is there also a way to let the values come in with an effect?

Each cell should be filled up a some seconds before the last one, is there a way? I think with javascript maybe or?

5

Unfortunately not really. Since the background is applied separately for each cell, there is no way to create an animation that swoops across them.

The reason for applying background separately on each cell is that the row doesn’t actually extend all the way to the end in a horizontally scrolling Grid. Theoretically you might be able to pull it off with a css animation, by setting the cell background transparent and applying an animated background on the row instead, if you know that your Grid will never scroll horizontally, but that seems a bit too hacky in my opinion.

6

Okay thank you. Is there a way to mark one row if it contains XY?

I have a column “marge” and the row with the lowest marge should be green. This should be possible anyhow right?

7

Yes, that’s described on the same page I linked to earlier: “Dynamically Styling Rows & Columns”

8

uh thanks works with setClassNamesGenerator i have used the deprecated one ;P