Flex Examples

The following examples show how you can use the firstVisibleItem property to get or set the first visible node in a Flex Tree control.

Full code after the jump.

The following example shows how you can get the current first visible item in a Flex Tree control by reading the firstVisibleItem property:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/01/determining-the-first-visible-item-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.FlexEvent;
            import mx.events.ScrollEvent;
            import mx.utils.ObjectUtil;

            private function tree_creationComplete(evt:FlexEvent):void {
                tree.expandChildrenOf(xmlDP, true);
                getFirstVisibleTreeItem();
            }

            private function tree_scroll(evt:ScrollEvent):void {
                getFirstVisibleTreeItem();
            }

            private function getFirstVisibleTreeItem():void {
                node = tree.firstVisibleItem as XML;
            }
        ]]>
    </mx:Script>

    <mx:XML id="node" />

    <mx:XML id="xmlDP">
        <node>
            <node label="1.a" />
            <node label="1.b" />
            <node label="1.c">
                <node label="1.c.i" />
                <node label="1.c.ii" />
                <node label="1.c.iii" />
                <node label="1.c.iv" />
                <node label="1.c.v" />
            </node>
            <node label="1.d" />
            <node label="1.e">
                <node label="1.e.i" />
                <node label="1.e.ii" />
                <node label="1.e.iii">
                    <node label="1.e.iii.A" />
                </node>
                <node label="1.e.iv" />
            </node>
            <node label="1.f" />
        </node>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Tree firstVisibleItem label:">
                <mx:Label text="{node.@label}" fontWeight="bold" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HDividedBox width="100%">
        <mx:Tree id="tree"
                dataProvider="{xmlDP}"
                labelField="@label"
                showRoot="false"
                width="50%"
                rowCount="6"
                scroll="tree_scroll(event);"
                creationComplete="tree_creationComplete(event);" />

        <mx:TextArea id="textArea"
                width="50%"
                height="100%"
                editable="false"
                text="{node.toXMLString()}" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can set the firstVisibleItem property to make sure a specific node is visible:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/01/determining-the-first-visible-item-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.FlexEvent;
            import mx.events.ListEvent;

            private function tree_creationComplete(evt:FlexEvent):void {
                tree.expandChildrenOf(xmlDP, true);
            }

            private function comboBox_change(evt:ListEvent):void {
                tree.firstVisibleItem = comboBox.selectedItem;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP">
        <node>
            <node label="1.a" />
            <node label="1.b" />
            <node label="1.c">
                <node label="1.c.i" />
                <node label="1.c.ii" />
                <node label="1.c.iii" />
                <node label="1.c.iv" />
                <node label="1.c.v" />
            </node>
            <node label="1.d" />
            <node label="1.e">
                <node label="1.e.i" />
                <node label="1.e.ii" />
                <node label="1.e.iii">
                    <node label="1.e.iii.A" />
                </node>
                <node label="1.e.iv" />
            </node>
            <node label="1.f" />
        </node>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="firstVisibleItem:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{xmlDP..node}"
                        labelField="@label"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{xmlDP}"
            labelField="@label"
            showRoot="false"
            alternatingItemColors="[#EEEEEE, #FFFFFF]"
            width="50%"
            rowCount="6"
            creationComplete="tree_creationComplete(event);" />

</mx:Application>

View source is enabled in the following example.