Vaadin flow (14) TreeGrid, setClassNameGenerator doesn't work at all

Flow
1

I have a TreeGrid, and I would make the expandable row (which contains an aggregated row) to stay out with bold text.

wiGrid.addColumn(TankInventory::getFull).setHeader(“Full (%)”).setSortable(false).setClassNameGenerator(iv → “bold”);
wiGrid.cellClassNameGenerator(iv → “bold”);

none of these work
when checking the cell with developer tools, the cell entry looks like:
<vaadin-grid-cell-content slot="vaadin-grid-cell-content-3">300.0</vaadin-grid-cell-content>

the className I gave to row/cell is not present anywhere

Please note, that I am completely off to html or javascript, so I can utilize only Java api solutions.
(the bold class already exists, and I can make the cell look bold with developer tool and edit the tag’s class value)

(this was just working with Vaadin7/8 without hassle)

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

Now I found my ‘bold’ classname in the DOM… under a #shadow-root
so, I guess the css I defined in the main DOM doesn’t work in the shadow, which is separated from the rest of the DOM.

3

you need to import the css with the style definitions for .bold { ... } into the component scope of the grid, as it’s described [here]
(https://vaadin.com/learn/tutorials/themes-and-styling-in-vaadin#component-scope)

Edit: new docs for styling and themeing: https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html

@CssImport(value = "./styles/boldGridColumn.css", themeFor = "vaadin-grid") instead of @CssImport("./styles/boldGridColumn.css")

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

Now I found my ‘bold’ classname in the DOM… under a #shadow-root
so, I guess the css I defined in the main DOM doesn’t work in the shadow, which is separated from the rest of the DOM.

5

thanks @Kaspar it works!

6

Hi,

I have a strange situation. I am using Vaadin bom 14.1.28.

I followed this approach, and it works (initially).

However, if I refresh the browser (Ctrl-F5) the css classes are not present anymore in the shadow-dom style, hence the style is not applied to the grid.

Anotation above my wrapping component

@CssImport(value = "./styles/cms-statecomparison.css", themeFor = "vaadin-grid")

The content of my css:

@charset "ISO-8859-1";

.cms-statecomparison {
    width: 100%;
}

.ADDED {
	background-color: #aaFFaa;
}

.CHANGE {
	background-color: #bbddff;
}

.REMOVED {
	background-color: #FFbbbb;
}

What I see initially in the style of the shadow-dom:

<style>@keyframes vaadin-grid-appear {
to {
  opacity: 1;
}

}

:host {
  display: block;
      animation: 1ms vaadin-grid-appear;
      height: 400px;
      flex: 1 1 auto;
      align-self: stretch;
      position: relative;
}
 ...........

:host([theme~="wrap-cell-content"]
) [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
  white-space: normal;
}

.cms-statecomparison {
  width: 100%;
}

.ADDED {
  background-color: #aaFFaa;
}

.CHANGE {
  background-color: #bbddff;
}

.REMOVED {
  background-color: #FFbbbb;
}

</style>

After the refresh:

<style>@keyframes vaadin-grid-appear {
to {
  opacity: 1;
}

}

:host {
  display: block;
      animation: 1ms vaadin-grid-appear;
      height: 400px;
      flex: 1 1 auto;
      align-self: stretch;
      position: relative;
}
 ...........

:host([theme~="wrap-cell-content"]
) [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
  white-space: normal;
}

</style>