Flex Examples

The following example shows you how you can prevent users from selecting the branch (folder) items in a Tree control in Flex by listening for the itemClick event and using the Tree class’s dataDescriptor.isBranch() method to determine whether the currently selected item is a branch, and if so, deselect the item.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = evt.currentTarget.selectedItem
                if (tree.dataDescriptor.isBranch(item)) {
                    tree.selectedItem = null;
                }
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <root>
            <node label="Parent 1">
                <node label="Child 1" />
                <node label="Child 2">
                    <node label="Grandchild 1" />
                    <node label="Grandchild 2" />
                </node>
                <node label="Child 3" />
                <node label="Child 4" />
            </node>
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            width="200"
            itemClick="tree_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

For more information on disabling list selection in the List/Tree/ComboBox controls, see Alex Harui’s excellent blog entry, “Disabling List Selection”.

For another example, see “Preventing specific items from being selected in a Flex Tree control”.