Flex 4: Truncating labels in a Tree Component

Wednesday, August 29, 2012


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 :)

2 comments

  1. 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.
    //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 !

    ReplyDelete
    Replies
    1. Dushanz Sorry for replying late. Didn't get time to check my blog as often as I would have liked.

      Regarding 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!

      Delete

 

About Me

My photo
Front-end Developer with over 9 years of experience in developing Web 2.0 sites with a keen eye for UX. Avid technology enthusiast; gadget freak; old school PC gamer; loves developing Apps & Data Visualizations.

My Website

Stack Overflow profile

Twitter Profile

Facebook profile