Grid row and cell highlights

Use Case:

  • Highlight specific cells of grid based on a user action

Implemented solution

  • In ValueProvider, assign a unique css classname to each cell
  • When the user performs an action build the classname
  • Execute JS:
  • Use document.getElementsByClassName(classname) to identify the cells which need to be highlighted
  • Add class “highlight” to each element returned by document.getElementsByClassName

Problem

  • document.getElementsByClassName(classname) only return the cells which are visible in the scrollable area.

Question

  • Is there a better way to implement this usecase?
  • If not, Is there a way to get all cells in the grid so i can add/remove css styles as needed?

Could the approach mentioned here work for your use case? https://cookbook.vaadin.com/dynamic-grid-row-background-color