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”.
{ 7 comments… read them below or add one }
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.