Spark DataGrid with HierarchicalCollection and GroupingCollection

A Spark-based DataGrid is one of the most important additions to Flex. It will be officially released shortly with the Flex 4.5 SDK. Finally, folks will be able to use the same skinning workflows they use on their other Spark components to customize the look of the DataGrids in their applications.

Unlike the MX DataGrid, where I wrote most of the code, and like the MX AdvancedDataGrid, where I didn’t write any of the code, I don’t think I wrote a single line of code for Spark DataGrid. A completely different team of folks wrote it. And that means I’m not all that familiar with how it works under-the-hood, so I decided to try learn more about it by stretching its capabilities in order to see if it has the right APIs and extension points, by adding a capability that won’t ship in-the-box with Flex 4.5, and that is the ability to use GroupingCollection to get some sort of hierarchical (tree-like) display in the Spark DataGrid.

It took about 4 hours to get to this point. I started with the example in the Flex doc at this link. Spark DataGrid only takes data providers that implement mx.collections.IList, so I wrote an ICollectionView to IList adapter, plugged it in, wrote a custom renderer and it pretty much works. Links to Demo and Source below. I’d say if I can do something like this in half a day, that the APIs and extension points are in good shape.

Note: Like all Flex 4.5 applications, the newly released Flash Player 10.2 is required to run the demo. The blog software we use makes it impossible to upload HTML wrappers so there isn’t any wrapper around the demo that will force the upgrade of the Flash Player. The Flex 4.5 prerelease will install the player or you can get it from the adobe site here.

Usual caveats apply. This code is not officially supported nor is it thoroughly tested.

Run Demo
Download Flash Builder 4.5 Project