Flex Examples
The following example shows how you can display the number of children in each branch of a Tree control in Flex by using the dataDescriptor property, labelFunction property, hasChildren() method and getChildren() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/displaying-the-number-of-children-in-each-branch-of-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function tree_labelFunc(item:XML):String {
var label:String = item.@label;
if (tree.dataDescriptor.hasChildren(item)) {
label += " (" + tree.dataDescriptor.getChildren(item).length + ")";
}
return label;
}
]]>
</mx:Script>
<mx:XML id="treeDP">
<root>
<node label="i) One" />
<node label="i) Two" />
<node label="i) Three" />
<node label="i) Four">
<node label="ii) One" />
<node label="ii) Two" />
<node label="ii) Three">
<node label="iii) One" />
<node label="iii) Two" />
</node>
<node label="ii) Four" />
</node>
<node label="1. Five" />
<node label="1. Six" />
</root>
</mx:XML>
<mx:Tree id="tree"
dataProvider="{treeDP}"
labelFunction="tree_labelFunc"
showRoot="false"
width="200" />
</mx:Application>
View source is enabled in the following example.
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
Hi peterd,
Do you know if it’s possible to have that number in a specific color ?
I tried with the color Style property but every text of the tree is then changed…
hi,
first let me say that your blog helped me a lot in past days while i was learning flex.
Now, my question is, i want to create combobox which has as elements branches from tree. Can u tell me how to do that.
thanks.
Dusan,
Something like this?
“Displaying a Tree control as a pop up for a Flex PopUpButton control”
Peter
nope, lets use your example above, what i want is to make combo box which has “i) four (4)” and “ii) three (2)”. i hope u understand me, im still new to this.
dusan
Dusan,
Something like this?
<mx:XML id="treeDP"> <root> <node label="i) One" /> <node label="i) Two" /> <node label="i) Three" /> <node label="i) Four"> <node label="ii) One" /> <node label="ii) Two" /> <node label="ii) Three"> <node label="iii) One" /> <node label="iii) Two" /> </node> <node label="ii) Four" /> </node> <node label="i) Five" /> <node label="i) Six" /> </root> </mx:XML> <mx:ComboBox id="checkBox" dataProvider="{treeDP..node.(children().length() != 0)}" labelFunction="comboBox_labelFunc" /> <mx:Script> <![CDATA[ private function comboBox_labelFunc(item:XML):String { var numChildren:int = item.children().length(); var suffix:String = ""; if (numChildren != 0) { suffix = " (" + numChildren + ")"; } return item.@label + suffix; } ]]> </mx:Script>Peter
Do you know how to display only branches (folders) in Tree?
i’ll try it now :) and get back to you
dataProvider=”{treeDP..node.(children().length() != 0)}” , i guess tells that its using non-empty branches, what if i have empty branches and want to display them in combobox? The thing is that im downloading XML file ( which can be changed ) from server and im displaying it as tree. Now when tree is displayed i can add empty branches, and also add leafs in that branches. And i want to display them in combobox ( branches, not leafs :) )
ty a lot for help so far
Dusan,
Something like this?
<mx:ComboBox id="checkBox" dataProvider="{treeDP..node}" labelFunction="comboBox_labelFunc" />Peter
uhh, i guess u dont understand me :(
when i put this i code i get both leafs and branches in combobox, i need only branches. I’ve been trying to solve this whole day :(. i tried to make something with “isBranch()”, but with no success.
Dusan,
Sorry, I guess I’m confused. It seems you’re trying to display possibly nested data in a linear List. How would you know if a node is an empty branch or just a leaf node?
The
isBranch()method works on a Tree because Trees can have multiple levels with children, whereas a list is usually only for displaying flat data.If you only want to display the “i) four (4)” and “ii) three (2)” branches, I think you’d need to use the following E4X which grabs all branches with at least one child:
dataProvider="{treeDP..node.(children().length() != 0)}"Otherwise, how would your Flex application know if it was looking at an empty branch or a leaf node (unless you put some sort of flag in your XML nodes indicating whether something was a branch or leaf).
Peter
First, thanks for your time, and thanks for the help, you helped me a lot. Now:
i did some work and find out some things, and realised what u meant.I used “isBranch=”true”" in tree XML and it seems that that did the trick. I got this XML now:
my tree looks like this:
i used your function tree_labelFunc:
private function tree_labelFunc(item:XML):String {
var label:String = item.@label;
if (tree1.dataDescriptor.hasChildren(item)) {selectednode.text = label;
comboBoxFolder[j] = label;
label += ” (” + tree1.dataDescriptor.getChildren(item).length + “)”;
}
return label;
}
Tree is now just like i wanted. Only one thing i need now, its about combobox, im using this:
private function comboBox_labelFunc(item:XML):String {return item.@label;}
this works fine since i dont have any leafs in root of the tree, and i wont have them.
now, the thing i need is, when i start application selected item in combobox is first item in combobox, in this case its “news”, how do i set that when application starts noone of the items are selected.
Dusan.
my tree isnt in the post above, dont know what happened lol
it seems that i cannot post xml code, probly i cose i dont know how, but nevermind, this is what i used in tree xml
node label=”empty folder” isBranch=”true”
Dusan,
Yeah, this blog isn’t very friendly for posting code. You’d need to escape your < as < before posting.
As for your ComboBox question, set the
promptproperty. For an example, see “Creating a simple label function on a Flex ComboBox control”.Peter
Cool, it helps me a lot.
Thank you.