I've updated my previous blog post on Tree Lines to include a Flex 4/Spark version which uses the MXTreeItemRenderer class.
For more documentation on how to use it see the blog post linked above.
I've also updated the AdvancedDataGrid example to show tree lines in the tree:
Thursday, September 9, 2010
Subscribe to:
Post Comments (Atom)
13 comments:
Hi, this is very nicely done. Thank you for making it available.
Andrew
Very cool!
Where is the Flex 4/Spark version available for download?
-Alan
Oops. Never mind. I just figured out the "View source" facility.
-Alan
P.S. It is still very cool... I've implemented in my app.
This is very cool, however I have a little problem, the column with the tree is now "always on top", if the text is larger than the column it writes over the next column, which the ADG default column doesn't do.
Has anyone the same issue? Any idea what to look at?
Thanks in advance
-Thomas
I've found the answer to the overlapping issue with the text. Simply set the depth to 0 on the ItemRenderer (with the first column being the "tree item").
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
columnIndex="0"
columnSpan="1"
depth="0"
renderer="ADGTreeItemLinesRenderer"/>
</mx:rendererProviders>
-Thomas
Scratch the comment above, I had a bad understanding of what depth was doing (still fairly new to Flex).
However, I was finally able to solve the issue with the following change in the render label
<s:Label id="labelField"
text="treeListData.label}"
paddingTop="2"
width="100%"
maxDisplayedLines="1"
/>
The width fix the overlapping issue and maxDisplayedLines keep the text on 1 line adding (...) automatically.
-Thomas
Thanks for sharing Thomas, sorry I didn't get back to your before now. Glad you solved your problem.
Chris
First off I'd like to say thanks for posting this. I was looking for a flex tree item renderer and likely would not have made it off the ground without this.
One issue I noticed is that once you started having a large amount of items shown on screen performance became a significant issue, I often have well over 100 items in multiple trees shown at a time in my app. So I've spent a few days trying to optimize performance, the biggest gain is moving the tree drawing logic out of the updatedisplaylist function. As the drawing logic must traverse all the way up the tree for each item it's a very heavy chunk of code. What I've done is modify it so that the tree draws the lines after the data is set and then only redraws if the data changes or the height of the renderer changes. Just some ideas for optimization.
Thanks for sharing that Hillemania. I didn't test it on large trees, but I'm not too surprised that it doesn't perform that well.
Chris,
As a self proclaimed newbie, I ahve a question. I am starting to use the flextras calendar component. It takes an array collection from a CF9 CFC and populates a list control. That parts works fine. I need to change the list to a tree control. Using your ideas would look nice. How do you take the flat file data per se and change it to work in your tree control. This will be a fairly large tree, at least in my mind having 8 to 10 nodes with multiple sub nodes etc.
Thanks
Jim
Hey Jim,
Just to be clear my example above only adds the tree lines functionality - so each tree node has a visible line that connects it to the root, which helps to show the depth of each item.
But in general, the Flex 3 tree takes a dataProvider just like a List, but it allows each object in that dataProvider to have children. If the dataProvider is XML/XMLList/XMLListCollection, then it uses the XML child tags as children. If the dataProvider contains Objects (Array/IList/ICollectionView), then it assumes that each parent object will have a children property containing the child node data values.
If you want something more complicated you'll have to make your own data descriptor (ITreeDataDescriptor).
Here is a link that contains some good information about hierarchical data providers: http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_6.html.
I also often refere to Tour de Flex for examples, although they tend to be pretty simple.
Good luck.
Chris,
Thanks for sharing the source. It is very cool.
I want to use this component to display the tree structure which has dynamic contents.
While the user is looking at the UI, a background process may update the tree. I would like to have the UI reflect the changes without collapse/expand the whole tree.
Is this possible?
Thanks,
Jin
Hi Jin,
I actually don't know whether it is possible. It should be possible, but I have never tried to do that.
Good luck.
Chris
Post a Comment