nulldesign // lars gerckens » Flex: Adding a tooltip to truncated Datagrid columns

Flex: Adding a tooltip to truncated Datagrid columns

I just found a nice way to automatically truncate text in datagrid columns and show tooltips for truncated elements, that I wanted to share:

package
{
	import mx.controls.dataGridClasses.DataGridItemRenderer;
 
	public class TruncateToolTipRenderer extends DataGridItemRenderer
	{
		private var textTruncated:Boolean = false;
		private var originalText:String;
 
		public function TruncateDataGridItemRenderer()
		{
			super();
		}
 
		override public function set text(value:String):void
		{
			super.text = value;
			originalText = value;
			textTruncated = truncateToFit();
		}
 
		override public function validateProperties():void
		{
			super.validateProperties();
			toolTip = textTruncated ? originalText : null;
		}
	}
}

Just set the itemRenderer property of your column to the new TruncateToolTipRenderer. Neat!

Update: … and it’s a lot easier if you just set the itemRenderer to mx.controls.Label, because a Label already has truncate and tooltip functionality. As so often in Flex, everything is built in. Lesson learned!

13. June 2008 | Posted in Actionscript, Flex

3 Comments

  • 1. Sujatha Malik  |  08. December 2008 at 10:14

    Really good component. I had my problem solved in matter of minutes. Thank you very much.

  • 2. Flex : Tooltip on Fixed W&hellip  |  21. May 2010 at 11:38

    [...] Column. The first thought that came to my mind was to quickly write up an ItemRenderer. But then as explained here, you can simply use mx.controls.Label as your ItemRenderer as the Label class already had a text [...]

  • 3. Flex : Tooltip on Fixed W&hellip  |  21. May 2010 at 14:36

    [...] The first thought that came to my mind was to quickly write up an ItemRenderer. But then as explained here, you can simply use mx.controls.Label as your ItemRenderer as the Label class already had a text [...]

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Trackback this post  |  Subscribe to the comments via RSS Feed

About

  • nulldesign is the company and showcase site of freelance developer Lars Gerckens who is based in Hamburg, Germany. I'm available for freelance work with focus on Flex, Flash and AIR development. I like to create dynamic user interfaces, cutting edge web experiences and innovative ways to visualize data.

    This site showcases some of my personal work and projects as well as an selection of commercial projects.

    If you are interested in my work or you have any questions, don't hesitate to drop me a line:

  • Profiles: Xing | Linkedin
  • Mail: lars [at] nulldesign [dot] de

Categories

Search