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.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Determining the first visible item in a Flex Tree control

  1. rugu87 says:

    awesome example, but i have another question, i am building a training video application, and i need the user to finish a video before the next video in a tree becomes availaible, so how do i make other nodes semi transparent until the user has finished the previous one?

  2. Bendz says:

    so this is what i’ve missed. I got messed up coding this part

  3. Yasir says:

    Hi,
    1. Problems 1
    I have different XML Data to display in the tree control.It is standard XML with no attributes.It has just text value for the leave node. e.g

    100000
    name

    100000
    name

    I need to display the root, then its 2 children subRoot and finally leaf nodes as sub nodes of the subRoot.
    I did try this through a labelFunction but it displays 10000000 as branch with empty leaf under it.

    2. Problem 2.

    Please help, if you have any idea to solve this problem.

    100000
    name

    100000
    name

    I want that root, then 2 subRoot and first children of each subRoot be displayed. How to do that?
    Regadrs
    Yasir

  4. ziv says:

    Hi,
    Is there any solution for finding first item, if the data provider is HierarchicalData ?

    Thanks,

    Ziv o

  5. ziv says:

    sorry , i forget to indicate that i mean using AdvancedDataGrid and not tree

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree