Displaying the number of children in each branch of a Flex Tree control

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.

View MXML

<?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 thoughts on “Displaying the number of children in each branch of a Flex Tree control

  1. 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…

  2. 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.

  3. 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

  4. 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

  5. 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

  6. Dusan,

    Something like this?

    <mx:ComboBox id="checkBox"
            dataProvider="{treeDP..node}"
            labelFunction="comboBox_labelFunc" />
    

    Peter

  7. 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.

  8. 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

  9. 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.

  10. 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”

Comments are closed.