How do I add style names to grid rows without selecting them?

Question

I want to style a grid row after clicking on it. I get the grid row / item in the itemClickListener, but I need to avoid using grid.select(item). I have achieved the desired output which would highlight the row I clicked on with the grid select method, but this causes problems for my app since I do not want that row to be selected, but I want it to be just highlighted, e.g. apply a CSS style to said row. This is my code so far:

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

as well as:

grid.setStyleGenerator(row -> grid.getSelectedItems().contains(row)
    ? getRowSelectedStyle(row)
    : null);

I cannot seem to find anything on the forums which could apply a style name for the clicked row.

score 4 · Accepted Answer · answered Sep 13 '21 at 16:35

4

You probably need to add a property to your item Bean, se "clicked".

Then you could do

grid.addItemClickListener(e -> {
    e.getItem().setClicked(true);
    grid.getDataProvider().refreshItem(e.getItem());
});

And

grid.setStyleGenerator(row -> row.isClicked()
    ? getRowSelectedStyle(row)
    : null);

answered Sep 13 '21 at 16:35

Tatu Lund

9,949
1
12
26

I had the exact same thing in mind, but did not know that I needed to refresh the item. In addition I added some code to deselect all items upon selecting a new one: `e.getSource().getDataProvider().fetch(new HierarchicalQuery<>(null, null)).forEach(item ->{item.setClicked(false);facetSearchPanel.getSearchResultPanel().getResultTable().getDataProvider().refreshItem(item);});` – Michael Kročka Sep 13 '21 at 16:41

How do I add style names to grid rows without selecting them?

1 Answers1