How to match between vaadin grid index and the UI element after a sort is a

Flow
1

Iam using Vaadin Grid 2.0 on the client side.
I am loading the data by binding to a JSON object.
For each row element Iam coloring the row, based on an ‘error’ property in the corresponding row object.
This works fine as long as there is no sorting applied, as the UI index and the Vaadin Grid items index match.

I want to repaint the whole grid with the error colors after a sort is applied ( and the indexes in the items do not match with the items displayed in the grid).
Does Vaadin grid provide an inherent solution for this ?

I tried using the Vaadin Grid’s _cache property as a hack, but this good only as long as I have the given set of rows.
If I keep adding rows dynamically to the table, this property value also gets updated.

2

Hi Siva,

Try binding the error value in your template as follows:

<vaadin-grid-column> <template> <div class=“my-wrapper” error$=“[[item.error] ]“>Content here</div> </template> </vaadin-grid-column> Then you can target the cells whose items have error with an attribute selector as follows:

.my-wrapper[error]
 {
  color: red;
}
3

Hi Tomi,

Thanks for the help.
I am able to resolve my cell highlight issue by binding to attribute.
And, I guess it would be faster compared to doing it using javascript.

Thanks,
Siva