Setting icons for specific nodes in a Flex Tree control

The following example shows you how you can override a specific node’s icon in a Flex Tree control ysing the Tree class’s setItemIcon() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/29/setting-icons-for-specific-nodes-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            [Embed("assets/folder_table.png")]
            private var FolderTableIcon:Class;
 
            [Embed("assets/folder_user.png")]
            private var FolderUserIcon:Class;
 
            [Embed("assets/folder_wrench.png")]
            private var FolderWrenchIcon:Class;
 
            private function init():void {
                var nodeOne:XML = xmlListColl.getItemAt(0) as XML;
                tree.setItemIcon(nodeOne, FolderTableIcon, FolderTableIcon);
 
                var nodeTwo:XML = xmlListColl.getItemAt(1) as XML;
                tree.setItemIcon(nodeTwo, FolderUserIcon, FolderUserIcon);
 
                var nodeThree:XML = xmlListColl.getItemAt(2) as XML;
                tree.setItemIcon(nodeThree, FolderWrenchIcon, FolderWrenchIcon);
            }
        ]]>
    </mx:Script>
 
    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1">
                        <node label="One.1.1">
                            <node label="One.1.1.1">
                                <node label="One.1.1.1.1" />
                            </node>
                        </node>
                    </node>
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
                <node label="Three" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            width="250"
            rowCount="6"
            showScrollTips="true" />
 
</mx:Application>

View source is enabled in the following example.

12 thoughts on “Setting icons for specific nodes in a Flex Tree control

  1. Nice example, but how to assign an icon for each level in the tree. One icon for the root, one for the first node level, etc. etc.

  2. Yeah I’ll second that! That would be a great example to see. I’m creating a tree of databases, that contain tables and then columns. Each level I would like to place a different column. I’ve learned about setting isBranch attribute on my XML tags, is their something just like that but for icons by chance?? That would be super helpful.

  3. Hi! I made this simple function to get the node level:

    public static function getItemLevel( tree:Tree, item:Object ):Number
    {
    	if ( item == null )
    		return 0;
    	return 1 + getItemLevel( tree, tree.getParentItem( item ) );
    }
    
  4. PS: You can use the iconFunction of the tree control to display the icons depending on the tree level.

  5. is it possible to add image button next to value (i.e after One.1) on mouse over the node ? how to do this

    help!

  6. Hi peter,
    I have an XML(not XMLListCollection) with the nodes having a ‘type’ property. I wanna set different icons to different nodes based on this ‘type’ property.
    How do i do that?

  7. hi, im using the setItemIcon, and i have some problems. for example, in the last level, it always set the same image…
    is this function only for setting a level node, or you can set a particulary icon for each element?

Comments are closed.