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 :)
Hi Vikram,in addition to truncating the excess text on labels, I wanted to display a tooltip only for the truncated labels. So I did something like this.
ReplyDelete//inside updateDisplayList function.
originalText = this.label.text;
toolTip = this.label.truncateToFit() ? originalText: null;
Now it displays the tooltips only when a tree item (with truncated text) is clicked on. Not on mouse over. I'd appriciate any pointers how to make it so that it displays the tooltips on mouse over. Thanks a lot for your tips !
Dushanz Sorry for replying late. Didn't get time to check my blog as often as I would have liked.
DeleteRegarding you issue, what you need to be looking at is a variable called "_trueText".
Check out this link: http://bit.ly/YptgRw
Hope this helps!