How to set color of cell in Grid in Vaadin 13?

Hello! I use Vaadin 13 and Grid in my project, and I want to set color of cell. For example, if number in cell more, than five, that cell will be green, else it will be red.
I know about grid.setStyleGenerator, but this method doesn’t exist in Vaadin 13.
Can I do something else?

Hi! Vaadin 13 has the style generator API, it’s just now called Grid::setClassNameGenerator. This generates CSS class names for the full rows. If you want to target individual cells, you can use Column::setClassNameGenerator to generate classes for the items on that specific column.

Including the actual styles is a bit tricky at the moment (Vaadin 14 will introduce some improvements to this). You need to create a style module in an HTML-file, and import it with @HtmlImport, for example:

<dom-module id="my-grid-styles" theme-for="vaadin-grid">
 <template>
   <style>
     /* Background needs a stronger selector to not be overridden */
     [part~="cell"]
.success {
       background: green;
     }
     .error {
       color: red;
     }
   </style>
 </template>
</dom-module>

With this example, you can return “success” or “error” class names from your generator based on the Grid items.

I forgot to say that I have java project. I tried to change color of cell with
grid.getColumnByKey(“”).getElement().getStyle().set(“background”, “green”), but, unfortunately, it doesn’t work. Can you explain me, how can I do this? I am a beginner in Vaadin, so please give me a detailed answer.

Yeah, setting styles on the columns doesn’t affect the cells.

To use the styles I showed in the previous snippet, add those contents into a file, e.g. grid-styles.html. Put it into your resource folder and import it by adding @HtmlImport("grid-styles.html") on top of your view class. Now to set the green background, i.e. the “success” class name to cells in one column, where some value is greater than 5, write something like this:

grid.getColumnByKey("yourKey").setClassNameGenerator(item -> {
    if (item.getValue() > 5) {
        return "success";
    }
    return "";
});

Including the actual styles is a bit tricky at the moment (Vaadin 14 will introduce some improvements to this)

any update on that? I struggle with exactly that right now :frowning:

Jürgen Unfried:
Including the actual styles is a bit tricky at the moment (Vaadin 14 will introduce some improvements to this)

any update on that? I struggle with exactly that right now :frowning:

Vaadin 14 comes with the @CssImport annotation, with which you can import actual .css files. No more saving css as .html with surrounding <custom-style> or <dom-module>.

See [Jouni Koivuviita’s tutorial]
(https://www.notion.so/Themes-and-Styling-in-Vaadin-a72d68eeafe341549c7adfcccdf5a951#d262f755ba48495abf3c78cc54e9c027)

I used @StyleSheet(“styles/myStylesheet.css”) in the main view and it works basically. The only thing I could not style with it was the cell grid (it just stayed white). I used setClassNameGenerator to generate the CSS class and refered it in the CSS, but no luck.

thanks for the hint I will try @CssImport

Including the actual styles is a bit tricky at the moment (Vaadin 14 will introduce some improvements to this).

Does anyone have an example of how to conditionally set cell colors in v14?

Does anyone have an example of how to conditionally set cell colors in v14?

Basically the [answer by Pekka]
(https://vaadin.com/forum/thread/17773702/17778442) applies also to v14, i.e. use classNameGenerator method either in Grid or Column (returns conditionally String e.g. “success”), then add css.

Say you have file grid-cell.css

/* Background needs a stronger selector to not be overridden */
[part~="cell"]
.success {
  background: green;
}
.error {
  color: red;
}

And then import it in Java

@CssImport("grid-cell.css", themeFor="vaadin-grid")

Another alterative is to use TemplateRenderer, which allows more deep and complex per cell html and css

See example here: https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/GridView.java#L141 (its Vaadin 13 project, but the method is 100% same in Vaadin 14)

Thanks, that is helpful. The only hiccup I think I’m hitting now is that I’m actually making an edit column. This compiles:

Column<MyClass> curCol = grid.addColumn(TemplateRenderer.<MyClass> of("<div style$=\"[[item.styles]
]\">[[item.expenses]
]</div>")
			.withProperty("styles", item -> item.getCellStyle()))

But this does not…

Column<MyClass> curCol = grid.addEditColumn(TemplateRenderer.<MyClass> of("<div style$=\"[[item.styles]
]\">[[item.expenses]
]</div>")
			.withProperty("styles", item -> item.getCellStyle()))

Is there a different technique I should use in this case?

In my use case I might be able to get by using a template renderer, and enclosing a text component within. I started trying a

with background-color set on it, but it looks strange due to padding/spacing on the cells:

https://i.imgur.com/gDwgneb.png

I have not tested that thing with Grid Pro, I just used regular Grid, but it seems that you can give the TemplateRenderer with addEditColumn too, but you need to have the value provider before it as parameter too:

https://vaadin.com/api/platform/14.0.4/com/vaadin/flow/component/gridpro/GridPro.html#addEditColumn-com.vaadin.flow.function.ValueProvider-com.vaadin.flow.data.renderer.Renderer-

Also, do not expect TemplateRenderer to be applied in cell where Editor is active, since Editor will replace TemaplateRenderer (if everything works as it should and not breaking)

Tatu Lund:

@CssImport("grid-cell.css", themeFor="vaadin-grid")

Just in case someone is struggling, correct annotation syntax is

@CssImport(value="grid-cell.css", themeFor="vaadin-grid")

How to set background-color for vaadin grid header using custom css file ?

Tatu Lund:

Basically the [answer by Pekka]
(https://vaadin.com/forum/thread/17773702/17778442) applies also to v14, i.e. use classNameGenerator method either in Grid or Column (returns conditionally String e.g. “success”), then add css.

This technique works, but I struggle to understand how. There are no class names being generated to the vaadin-grid-cell-content elements. However, the content of those elements is styled all right. So where are those class names that I supposedly generated? I would like to write some tests for my code.

The class names are applied to the <td> elements, which you can find in the <table> under the shadow root of <vaadin-grid>.

This enables you to style the entire cell, instead of just the <vaadin-grid-cell-content>, which doesn’t fill the entire table cell.