Changing the style of a DataGrid row after it is selected

On a few projects I have used DataGrids for the navigation of a video player. It’s great because it allows the user to sort by length of video, presenter, title, topic, etc. The downside is that in a long list it is difficult for the user to keep track of which videos – rows – they have clicked on.

That’s one thing I don’t think I’ve ever seen in a Flex/Flash based app is the changing of the appearance of a navigational element after it has been selected and keep it that way. Even a lot of HTML websites today don’t change the appearance of links after they have been clicked and I don’t think anyone does it with image/buttons.

I created an example as a proof of concept that you can see here. This one is a bit involved with loading XML, showing images, etc. If you’d like to see the basics of how the isVisited state is done then check out the simple example below.

Here’s a simple version that just covers the basics.

Something that I really need to get my head around, and keep it there, is that the itemRenderers of a list based component don’t move. For instance, with a DataGrid when you click on the headers and perform a sort the rows reorder themselves. At first glance it seems like the actual itemRenderers have moved, switched positions, to display the new order. But that’s not it at all. The itemRenderers in each rows sit tight and don’t move. All that happens is that the data that they are displaying changes, duh!

I’ve ran into this wall a few times on various occasions. Each time it took a while to figure out what was going on: that my mental model was flawed. Hopefully this time it’s indelibly etched on my gray matter.