Flex Examples
The following example shows you how you can toggle the root node in a Flex Tree control’s data provider by setting the showRoot property.
Full code after the jump.
<!-- http://blog.flexexamples.com/2007/11/29/toggling-a-tree-controls-root-node-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="xmlDP">
<root label="root">
<child1 label="child1a">
<child2 label="child2a" />
<child2 label="child2b">
<child3 label="child3b" />
</child2>
<child2 label="child2c" />
</child1>
<child1 label="child1b" />
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="showRoot:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:HDividedBox width="100%">
<mx:Tree id="tree"
dataProvider="{xmlDP}"
labelField="@label"
showRoot="{checkBox.selected}"
width="100%"
rowCount="7" />
<mx:TextArea id="textArea"
editable="false"
text="{xmlDP.toXMLString()}"
width="100%"
height="100%" />
</mx:HDividedBox>
</mx:Application>
View source is enabled in the following example.
The Flex Tree control also has a read-only hasRoot property which indicates whether the Tree control’s data provider has a root element. If your data provider is an XML object or Object this property is true, if the data provider is an XMLList or array, this property is false.
The following example shows how you can use the hasRoot property to determine if the Tree control’s data provider has a root node.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/29/toggling-a-tree-controls-root-node-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="xmlDP">
<root label="root">
<child1 label="child1a">
<child2 label="child2a" />
<child2 label="child2b">
<child3 label="child3b" />
</child2>
<child2 label="child2c" />
</child1>
<child1 label="child1b" />
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Label id="lbl"
text="hasRoot:"
fontWeight="bold" />
<mx:Spacer width="100%" />
<mx:CheckBox id="checkBox"
label="showRoot:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:HDividedBox width="100%">
<mx:Tree id="tree"
dataProvider="{xmlDP.child1}"
labelField="@label"
showRoot="{checkBox.selected}"
width="100%"
rowCount="7"
creationComplete="lbl.text += tree.hasRoot;" />
<mx:TextArea id="textArea"
editable="false"
text="{tree.dataProvider.toXMLString()}"
width="100%"
height="100%" />
</mx:HDividedBox>
</mx:Application>
View source is enabled in the following example.
Note that in the previous example, the data provider is an XMLList object, therefore the hasNode property is false and setting the showRoot property has no effect.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
How to add a check box at every node of a tree ??
I have seen some of the examples from different sites(one is this also: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=545&productId=2)
but here the data provider of a tree is a simple hardcoded xml file within the mxml application.
I am getting a xml as a result of a http service call and passing that as a data provider to the tree control and the CheckTreeRenderer in the above code as an Item Renderer.
But my application hangs and does not display any alert message even.
Please help. Its urgent….
Thanks in advance
Ankita.
I was looking for such example. Thanks :)