Tree and Lazy or Paged Data

The Flex Tree control (mx.controls.Tree) is the subject of many complaints. It’s pretty finicky if you don’t use a dataProvider where the data is “all there”. Any attempts to lazily load in nodes must be coded carefully. If you don’t tweak the DataDescriptor properly it won’t work.
Tree does have one major flaw, and that is that it can’t handle a dataProvider that throws ItemPendingErrors as data sets that come from LiveCycle DataServices do. Tree uses an undocumented pair of classes to effectively linearize the current set of open nodes into a dataProvider that its base class (List) can handle. The code for that was scrambled together at the last minute and wasn’t deemed sufficient enough for the AdvancedDataGrid, so our AdvancedDataGrid team developed their own HierarchicalCollectionView classes and beefed them up to handle ItemPendingErrors. Due to various scheduling and logistical issues, Tree was left by the side of the road, stuck with its undocumented HierarchicalCollection classes that can’t handle ItemPendingErrors.
At the tail end of Flex 3, several customers were in need of a Tree that could handle ItemPendingErrors. THe shortest route to such a thing was to create a subclass of Tree that could handle the AdvancedDataGrid’s HierarchicalCollectionView. Example and source code are below. You’ll see the acronym “DMV” throughout because the AdvancedDataGrid and HierarchicalCollectionView are part of the Data Management and Visualization package (which requires the Professional versions and/or more money) so those of you trying to go the cheap route won’t be able to leverage this code. Also, you won’t need this unless your data source throws ItemPendingErrors when an attempt is made to fetch data that hasn’t been paged in yet, and unless you developed your own, you are using one of our data services which also cost you some money.
The example comes with a test tool we wrote that throws lots of ItemPendingErrors so we can try to find all the code paths that are sensitive to it. Unlike most of the posts on my blog, this one actually got some QA time, but the usual caveats apply.
Run Example
Download Source

7 Responses to Tree and Lazy or Paged Data

  1. Den says:

    Strange behavior while scrolling tree by scrollbar (top level nodes after first six one don’t displayed)
    Alex responds:
    The demo defaults to 3 second “server response” so it may take a while, but the nodes will show up eventually.

  2. Simon Bailey says:

    Alex – many thanks that was a much needed and much appreciated example! – simon

  3. Tom Gruszowski says:

    Thanks for the post Alex, I have a slightly sour feeling for flex simply because of my issues with the Tree control. Fortunately your QA team has helped me with some workarounds (TreeDMV was mentioned).
    I’m using a ArrayCollection of SomeTreeNode objects which in turn have a “children” collection. Is HierarchicalCollectionView and
    HierarchicalCollection necessary to work with a tree control? What is the relationship between object based (instead of XML and model) data provider and some of those classes? I have been simply assigning to dataProvider.
    Also, I had a very hard time googling for “TreeDMV” and getting the code anywhere public (before this post). Have the flexlib or any other AS collections implemented this?
    Alex responds:
    If you have an ArrayCollection whose elements also contain ArrayCollections, Tree should work well for you once you get the ITreeDataDescriptor set up correctly.
    Tree works by taking any data you give it (XML, Object or some instance of a class) wraps that data in a collection if it isn’t already a collection, then uses the ITreeDataDescriptor to “walk” the nodes. If the ITreeDataDescriptor doesn’t have its own hierarchical collection wrapping the original collection, the Tree wraps the original collection in its undocumented HierarchicalCollection which can’t handle ItemPendingErrors.
    So, you can assign anything you want to the Tree’s dataProvider, but in this example I want to control both the ITreeDataDescriptor and the HierarchicalCollection that wraps the data. Based on your particular scenario, you might also need to do that.
    I don’t think TreeDMV was published until this post. It might have been privately distributed to the few folks that needed it.

  4. Tom Gruszowski says:

    Using the AS ArrayCollection wrapper (ArrayOfSomeTreeNode) generated by FB WS generator so everything other than “isBranch” and “collection” property is implemented according to the interface.
    I read that Gumbo has a brand new Tree control, will this be an Fx component and only compatible with Flash 10?
    Alex responds:
    If you are using a plain-jane ArrayCollection like that, then the next question is what your ITreeDataDescriptor looks like. The default one will not always handle inserting children on-demand as the node opens. Maybe an example of that is needed, but I thought there were already examples out there on other blogs and forums.
    Gumbo components will require FP10. I don’t think any commitment has been made about a Tree or how such a thing would work.

  5. Alexi says:

    Nice implementation, oh no… If you make a AdvancedDataGrid with a hierarchicalCollectionView dataSource that uses a [Managed] object which uses on-demand loaded data, you get duplicate entries in the ArrayCollection. Say you do something like this:
    and this:
    Just click on any of column headings and every subsequent node you expand puts duplicate entries into your collection when the server-side fetching is complete. Is this an unsupported feature or hierarchicalCollectionView or a horrible bug? Either way I need some kind of workaround.
    Alex responds:
    This post is about Tree. For ADG help, find Sameer Bhatt’s blog.

  6. shashidhar says:

    hi Alexi,
    I have built a tree structure , using flex default tree , and which has item renderer of variable height ,i used flex 4 MXtreeItemrenderer, my tree has huge number children of variable height . when i scrolled down to last item , it is not showing last item, scroll thumb is coming out of a tree ,

    Please help in this regards,

    if i fix row height , i don’t see any problem. the problem with variable height