How does virtual rendering set the font while repainting?

My grid returns a dataset that requires some scrolling. Lets say the initial font weight is set to bold. On row click there is a function that opens up a separate form with the details of that row. Another button brings me back to the grid. The rows I've clicked on is tracked in an array, and font weight for these rows is set to normal to distinguish them from the rest.

All of this works fine up to this point. The problem is that when I scroll down the grid and it repaints, all the rows change the font weight to normal, instead of bold. I've tried all kinds of ways to sort this out, but running out of options. This worked when we used to use paging with the old (1.0) version. But transitioning to virtual rendering is messing up our css rules and I need help.

Similar issue with the checked items template in the row selector. When I click on the rows initially, it shows up as checked. I scroll down, and then scroll back again, only the last checked row retains the check mark. The others show un-checked. I'm not sure why that's happening. What am I missing?

When you change something directly at the DOM level - the changes will be lost during scrolling because AW destroys the rows which are no longer visible and re-creates them when you scroll back. Always change classes/styles/attributes using AW API and not directly on the html elements -

grid.getRow(1).setStyle('background', 'red');