Recently, I stumbled upon quite a bunch of questions on forums regarding truncating the labels of entries in the Tree Component.
The solution, scattered in many places, not that obvious, is quite easy.
All you need to do is use the 'truncateToFit' property with your Tree Item Renderer.
The different ways of achieving this when using an MXML item renderer & an ActionScript class file as renderer are mentioned below:
1. When using an MXML based item renderer
In this case, all one needs to do is add truncateToFit="true" to the Label tag in the MXML file.
<mx:label color="#00ff00" font="font" id="labelField" paddingtop="2" text="{treeListData.label}" truncateToFit="true" width="100" >
2. When using an ActionScript class based item renderer
In this case, just add a single line at the end of the updateDisplayList overridden method as shown below:
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
....
this.label.truncateToFit();
}
When working with a class based renderer, 'truncateToFit' acts as a method that returns a Boolean value to inform whether truncate action was required or not. Also, it can accept a single parameter that you wish to use instead of the ellipsis (by default ellipsis '...' are used). This might be useful to somebody :)
