Removing folder icons from the Flex Tree control

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

12 thoughts on “Removing folder icons from the Flex Tree control

  1. 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. 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. 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. 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. 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. Alternate way is to set property in Tree tag directly

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

    1. MXML tag was left out

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

Comments are closed.