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.
{ 16 comments… read them below or add one }
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.