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

19 Responses to Spark DataGrid with HierarchicalCollection and GroupingCollection

  1. JabbyPanda says:

    Nice work, thanks for sharing it with us.

    FYI, currently expanding/collapsing the root tree node “erases” the whole display of the tree, only “+” remains visible.

    E.g., simple interaction – expand “Southwest” node, select “Arizona” line, collapse “Southwest” node

  2. Pingback: Cool Stuff with the Flash Platform – 2/18/11 | Finding Out About

  3. Pingback: Playing with Spark DataGrid part 3 : Grouping | François de Campredon

  4. Jeff Hu says:

    There is compilation error in TreeDataGrid.mxml line 89
    dpHier = IHierarchicalCollectionView(ICVIListAdapter(grid.dataProvider).originalView);

    where “grid” is undefined.

  5. CM says:

    Will there be a Spark way to replicate the MX AdvancedDataGrid functionality in 4.5?

  6. pedro says:

    Hi there,

    Quick question that’s been driving me nuts for a day now, how do I get the columns to resize and not to show the horizontal scroll bar?

    Thanks in advance!
    P.

    • Alex Harui says:

      Try a custom skin that doesn’t have a horizontal scrollbar. When you adjust a column’s size, adjust other column sizes so they fit.

      • pedro says:

        Ha, you see that would work if they weren’t set to resizeable by the user.
        I manage to remove the Horizontal scroll just fine just can’t get the columns to not overflow if they are set to resizable.

        Thanks in advance.

  7. alex hearnz says:

    I want to have the nodes for the treedatagrid appear opened and i am trying this but it doesn’t work. Actually the refresh hangs up the flash player.

    dpHier.openNode(data);
    ICVIListAdapter(grid.dataProvider).originalView.refresh();

    any ideas on what i should try?

  8. Yohana says:

    Hi, i have a big problem with header background columns in DataGrid’s Spark in sdk 4.5, somebody could help me? thanks.

  9. The download links seem to be broken at the moment, and this is exactly whatI am looking for, please can you fix

  10. Alan says:

    Thank you so much for sharing this.

    Before I found your page, I had an AdvancedDataGrid that pulled its info from a db and did tree data grouping on two data types. However, when looking for a way to add a checkbox to the rows I found your draganddrop spark datagrid, and I thought it was completely awesome. But I didn’t want to sacrifice my beautiful tree hierachy 🙁 However… now I’m trying to get this example to work and then I’ll try to stack your draganddrop on top of that too 😀 Essentially, I want to end up with a spark datagrid that has tree hierarchy and grouping along with draganddrop.

    Hope your code is added on later flex versions though. That’d really make my day!

  11. Main D. Tork says:

    Thank you, Alex.

    I noticed a flaw: if you will change ‘Southwest’ in one of the nodes. data will come empty in the item renderer.

  12. Thanks Alex,
    just found two little problems:

    1) In the ICVIListAdapter, when the getItemIndex implementation does a cursor seek starting from the end, it should use index – (length – 1) as the offset, instead of index – length (that is, the offset of the last element is 0, since index is 0-based)

    2) This is not probably a real problem (and not due to your implementation), but I noticed that the HierarchicalCollectionViewCursor.findAny implementation uses a for..in loop to perform object matching.. this doesn’t work in my case since I used strongly typed (non-dynamic) objects in the hierarchy model: the for.in loop doesn’t fond any properties and the first item will always match.. I had to mark objects as dynamic, so the findAny can use the dynamically added “mx_internal_uid” property (injected by UIDUtil) and perform a correct match. Probably, the findAny method should try to ask the object UID to UIDUtil, since it keeps all generated UIDs for non-dynamic objects in a local dictionary.

    I’m about to file an issue for this, unless there’s something obvious I can’t see..

    Cosma Colanicchia