Mark row selected on mouse click in vaadin grid(SelectionMode.MULTI)

I have a Grid with a multi-select option. In a normal way when I click in the checkbox the row is selected with the default selected color. But I need to have the same or other selected color when I click in the grid´s row.

I have created a CSS:

:host(#grdPeriodicos) td.selected{
    background-color: #BDBDBD;
    color: #242140;
    font-weight: bold;
}

Imported it in my class view:

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class PeriodicoListaView extends VerticalLayout implements Serializable {
...

grdPeriodicos.setId("grdPeriodicos");
grdPeriodicos.addColumn(periodico -> periodico.getId_Nota()).setHeader("Nota");
grdPeriodicos.addColumn(periodico -> periodico.getId_NotaItem()).setHeader("Nota item"); 
grdPeriodicos.setSelectionMode(SelectionMode.MULTI);

grdPeriodicos.setClassNameGenerator( p -> {
            return ((periodicoDTO != null) && (periodicoDTO.getId_NotaItem().equals(p.getId_NotaItem()))) ? "selected" : null; 
});


grdPeriodicos.addItemClickListener(e -> {

            if(e.getItem() != null) {
                carregaEPreencheDetalhesPeriodico(e.getItem());             
            }
        });

The code above works when the grid is loaded, but when the row is clicked nothing happens. What can I put in the addItemClickListener to fire again setClassNameGenerator?

Or what can I do to have the line selected when the row is clicked?

Answer

In multi-selection mode, the item is selected when clicking the checkbox, but not when clicking anywhere in the row. If you want to select the item in response to a row click, you can do:

grdPeriodicos.addItemClickListener(e -> {
  grid.asMultiSelect().select(e.getItem());
});

Alternatively, if you want to update the row styles without selecting the item, you need to call refreshItem (which will cause the ClassNameGenerator to be evaluated again for that row)

grdPeriodicos.addItemClickListener(e -> {
  if(e.getItem() != null) {
    carregaEPreencheDetalhesPeriodico(e.getItem());             
    grid.getDataProvider().refreshItem(e.getItem());
  }
});

There is a live demo using similar approach in Vaadin’s Cookbook.