How to set background Color für hovered row in grid

Flow
1

Hi, I use the standard theme lumo for my vaadin flow 11 application.

There is no background color for a hovered row in the grid. How can I set the hovered background color? I don’t know how I have to manipulate the css elements.

2

You need to have suitable style generator for that row / cell like .setStyleGenerator(item -> (item.getAmount() < 100 ? "yellow-background" : null))

And then in your theme scss mixing this type of rule

.v-grid-cell.yellow-background:hover {
	background: yellow;
}
3

But where or how should I use .setStyleGenerator(**) ?

My grid is initialized like

Grid<DataRow> myGrid = new Grid<>();

for (String column : dataSet.getColumns()) {
	            myGrid.addColumn(row -> row.getValue(column)).setHeader(column);
	            System.out.println("header = " + column);
	        }

Isn’t it .setClassName? But how can I apply it for a row?

4

Oh, I see. You are using Flow, i.e. Vaadin Platform V10+, not Vaadin 8 and my advice for that.

With Vaadin Flow this is done completely differently

With this kind of theme mixin you can have hover style with Grid cells, but that applies the whole Grid

<dom-module theme-for="vaadin-grid" id="my-grid">
    <template>
        <style>
            :host(.my-grid) [part="row"]
 :hover{
                background:yellow;
            }
        </style>
    </template>
</dom-module>

If you need conditional styling of the row, you need to use template renderer, since there is no style generator implemented in Flow Grid yet.

5

Yes, I am using flow. And I don’t have a row part. I just see cells with the html-tag

<vaadin-grid-cell-content slot="vaadin-grid-cell-content-0"><vaadin-grid-sorter path="col0">vkOrg</vaadin-grid-sorter></vaadin-grid-cell-content>

So I already have a main-page-html which I add to my MainPage.java by @HtmlImport(“main-page.html”). Can I add different dom-module-Elements? For example one for id=“main-page” and one with theme-for=“vaadin-grid”.

6

I solved my problem by adding

<dom-module theme-for="vaadin-grid" id="statistic-grid">
    <template>
        <style>           
            [part~="row"]
:hover [part~="body-cell"]
{
            	color: red;
            	background-color: yellow;
            } 
        </style>
    </template>
</dom-module>

to my main-page.html file. Thank’s a lot for your answer @Tatu Lund. This helped me really much.