Toggling a Tree control’s root node in Flex

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.

View MXML

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

View MXML

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

2 thoughts on “Toggling a Tree control’s root node in Flex

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

Comments are closed.