Creating a custom icon function on a Flex Tree control

By Peter deHaan On November 15, 2007 · 10 Comments

The following example shows how you can build a custom icon function on a Flex Tree control to display different icons depending on the current node name in the data provider.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/bullet_go.png")]
            private var myBulletGoIcon:Class;
 
            [Bindable]
            [Embed("assets/bullet_star.png")]
            private var myBulletStarIcon:Class;
 
            [Bindable]
            [Embed("assets/bullet_wrench.png")]
            private var myBulletWrenchIcon:Class;
 
            private function tree_iconFunc(item:Object):Class {
                var iconClass:Class;
                switch (XML(item).localName()) {
                    case "league":
                        iconClass = myBulletGoIcon;
                        break;
                    case "division":
                        iconClass = myBulletStarIcon;
                        break;
                    case "team":
                        iconClass = myBulletWrenchIcon;
                        break;
                }
                return iconClass;
            }
        ]]>
    </mx:Script>
 
    <mx:XML id="dp">
        <mlb>
            <league label="American League">
                <division label="East">
                    <team label="Boston" />
                    <team label="New York" />
                    <team label="Toronto" />
                    <team label="Baltimore" />
                    <team label="Tampa Bay" />
                </division>
                <division label="Central">
                    <team label="Cleveland" />
                    <team label="Detroit" />
                    <team label="Minnesota" />
                    <team label="Chicago" />
                    <team label="Kansas City" />
                </division>
                <division label="West">
                    <team label="Los Angeles" />
                    <team label="Seattle" />
                    <team label="Oakland" />
                    <team label="Texas" />
                </division>
            </league>
        </mlb>
    </mx:XML>
 
    <mx:Tree id="TreeProject"
            dataProvider="{dp.league}"
            labelField="@label"
            showRoot="true"
            iconFunction="tree_iconFunc"
            width="320"
            height="240" />
 
</mx:Application>

View source is enabled in the following example.

Tagged with: icon • iconFunction

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

10 Responses to Creating a custom icon function on a Flex Tree control

Anonymous says:

December 23, 2007 at 10:15 am

Is there no way the switch case can be made more dynamic? Is there a way to dynamically create the icon class? Because the switch-case forces me to declare every icon class that I would potentially want to use

Reply
Martin says:

February 21, 2008 at 7:56 am

Great,

Just what I was looking for.. Keep up the good work!! ps. maybee you can have a little lighter color on this blog, so it doesnt feel like a warez site..thanks again for the example..

Reply
Partha says:

September 5, 2008 at 3:42 am

Hi,

The above example is nice one & I do have a same kind of requirement. But after implementing the above concept I’m finding another issue. I don’t want to display the default ARROW (“>”) icon before the icon images. But once I remove/shade it the tree node expansion does not work. Can you please advice how this can be done?

Many Thanks

Cheers

Partha

Reply
peterd says:

September 5, 2008 at 8:10 am

Partha,

You can try the following: “Opening branches by clicking rows in a Tree control in Flex”

Peter

Reply
Partha says:

September 6, 2008 at 12:42 am

Hi Peter,

Thanks for your reply, but unfortunately the above example is not working for my case. My application is bit complex. Let me explain how my application is working:

1. Initially I have a static XML, where most are parent node (0′th level) and few of them has child node (1st level).
2. I call a function from “ItemOpen” property of the tree. This take “TreeEvent”. This function fetch data for 2nd level (if the parent level is 0 or 3rd level data if parent level is 1).
3. Again when, newly populated node (whether it is 2nd or 3rd level) is opened the function retrieve 4th level data…so on.

Now, in your example expansion & collasp is handle by “ListEvent” event type. But same thing I could not replicate in my application where we have “”TreeEvent” as event type.

Not sure, whether I am able to make you understand about the problem or not? But if you have any further more advice then please let me know. It will be great help for me.

Many Thanks

Partha

Reply
Luca says:

September 11, 2008 at 2:49 am

Hi all.

Thank you for your examples.

But I can’t understand how to make it dinamic.

I find the icon path in a XML document, but I’m not able to attach it to a tree…

Reply
Nico says:

February 17, 2009 at 9:37 am

Hi all.
I tried this feature but the “Item” value of the function SetIcons is always null.
For information i use a http service to “import” a XML File. So i get always as icon the default icon.

Someone has an idea ?

Thanks.

Nico

Reply
- Rivki says:
  
  September 25, 2011 at 8:01 am
  
  Try this:
  private function tree_iconFunc(item:Object):Class {
  var iconClass:Class;
  var icon:String = item.@icon.toString();
  switch (icon) {
  //some code here
  }
  return iconClass;
  }
  
  Reply
Anonymous says:

August 11, 2010 at 8:19 am

thanks a lot for this perfect example

Reply
tarik says:

November 4, 2011 at 4:11 am

Thank you so much you save my date. it was very helpfull

Reply