The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible.

The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet:

<mx:Style>
    Tree {
        folderClosedIcon: ClassReference(null);
        folderOpenIcon: ClassReference(null);
    }
</mx:Style>

The long answer?
Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/25/removing-folder-icons-from-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <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:Style>
        Tree {
            folderClosedIcon: ClassReference(null);
            folderOpenIcon: ClassReference(null);
        }
    </mx:Style>

    <mx:Tree id="TreeProject"
            dataProvider="{dp.league}"
            labelField="@label"
            iconField="@icon"
            showRoot="true"
            width="320"
            rowCount="9" />

</mx:Application>

View source is enabled in the following example.

For an example of removing leaf icons from the Tree control in Flex, see “Removing leaf icons from the Flex Tree control”.

 
Tagged with:
 
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.

12 Responses to Removing folder icons from the Flex Tree control

  1. Sonia says:

    Thanks for the post. This is exactly what I needed, but I find that once I put the code into a component (based on Canvas), it stops working (but with no error messages)? I’m still relatively new to Flex and I’m sure it’s something I’m missing. Is there any reason I can only make this work in the Application wrapper?

  2. peterd says:

    Sonia,

    I’m unable to reproduce the behavior in Flex 2 or Flex 3 using the example above with the following snippet:

    <mx:Canvas>
        <mx:Tree id="TreeProject"
                dataProvider="{dp.league}"
                labelField="@label"
                iconField="@icon"
                showRoot="true"
                width="320"
                rowCount="9" />
    </mx:Canvas>
    

    Does that work for you? If so, how is your code different. If that code doesn’t work for you, yikes! Which version of the Flex SDK are you running?

    Peter

  3. CipriB says:

    You need to set width and height to the Canvas, otherwise you cannot see anything.
    So, you should have something as follows:

    // or width=”100%” and height=”100%”

  4. CipriB says:

    You need to set width and height to the Canvas, otherwise you cannot see anything.
    So, you should have something as follows:

    <mx:Canvas width=”100%” height=”100%”> // numbers or percents
    <mx:Tree id=”TreeProject”
    dataProvider=”{dp.league}”
    labelField=”@label”
    iconField=”@icon”
    showRoot=”true”
    width=”320″
    rowCount=”9″ />
    </mx:Canvas>

  5. mohan says:

    How set font only label and increase the the label height when the tree is collapsed?
    could any help ?, it is urgent.

    Thnaks
    Mohan

  6. This also seems to work:

  7. Serge says:

    for leaf use:
    defaultLeafIcon: ClassReference(null);

  8. Henry Chen says:

    Alternate way is to set property in Tree tag directly

    You could use same way to set icon to something else as well.

    • Henry Chen says:

      MXML tag was left out

      folderClosedIcon=”{null}”
      folderOpenIcon=”{null}”
      defaultLeafIcon=”{null}”

  9. guest says:

    How to set a vertical distance between tree header and 1st node of that.

  10. guest says:

    How to set a background color only for the selected node’s label.

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