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

{ 8 comments… read them below or add one }
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.
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.
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 ) ); }Slt Andry ,
Suis gasy , et j’aimerai correspondre avec toi , car suis un flexeur débudant.
Cdlt.
rakri
PS: You can use the iconFunction of the tree control to display the icons depending on the tree level.
nice job, thanks, you helped me.
is it possible to add image button next to value (i.e after One.1) on mouse over the node ?
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!