Flex Examples
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.
<?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”.
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.
Share
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?
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
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%”
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>
How set font only label and increase the the label height when the tree is collapsed?
could any help ?, it is urgent.
Thnaks
Mohan
This also seems to work:
Failed on my commenting markup. Setting within the MXML folderOpenIcon=”{null}” also seems to work.
for leaf use:
defaultLeafIcon: ClassReference(null);
Alternate way is to set property in Tree tag directly
You could use same way to set icon to something else as well.
MXML tag was left out
folderClosedIcon=”{null}”
folderOpenIcon=”{null}”
defaultLeafIcon=”{null}”
How to set a vertical distance between tree header and 1st node of that.
How to set a background color only for the selected node’s label.