Header image

Flex: Adding a tooltip to truncated Datagrid columns

June 13th, 2008 | Posted by lars in Actionscript | Flex

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!

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

5 Responses



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">