The following example shows you how you can truncate a DataGrid column’s text and display a tool tip by setting a custom header renderer.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="xmlDP">
<nodes>
<node col1="One.1" col2="One.2" />
<node col1="Two.1" col2="Two.2" />
<node col1="Three.1" col2="Three.2" />
<node col1="Four.1" col2="Four.2" />
<node col1="Five.1" col2="Five.2" />
<node col1="Six.1" col2="Six.2" />
<node col1="Seven.1" col2="Seven.2" />
<node col1="Eight.1" col2="Eight.2" />
<node col1="Nine.1" col2="Nine.2" />
</nodes>
</mx:XML>
<mx:DataGrid id="dataGrid"
dataProvider="{xmlDP.node}"
width="300"
height="200">
<mx:columns>
<mx:DataGridColumn dataField="@col1"
headerText="The quick brown fox jumped over the lazy dog"
headerRenderer="mx.controls.Label" />
<mx:DataGridColumn dataField="@col2"
headerText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
headerRenderer="mx.controls.Label" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.controls.Label;
private var xmlDP:XML = <nodes>
<node col1="One.1" col2="One.2" />
<node col1="Two.1" col2="Two.2" />
<node col1="Three.1" col2="Three.2" />
<node col1="Four.1" col2="Four.2" />
<node col1="Five.1" col2="Five.2" />
<node col1="Six.1" col2="Six.2" />
<node col1="Seven.1" col2="Seven.2" />
<node col1="Eight.1" col2="Eight.2" />
<node col1="Nine.1" col2="Nine.2" />
</nodes>;
private var dataGrid:DataGrid;
private var dataGridCol1:DataGridColumn;
private var dataGridCol2:DataGridColumn;
private function init():void {
dataGridCol1 = new DataGridColumn();
dataGridCol1.dataField = "@col1";
dataGridCol1.headerText = "The quick brown fox jumped over the lazy dog";
dataGridCol1.headerRenderer = new ClassFactory(Label);
dataGridCol2 = new DataGridColumn();
dataGridCol2.dataField = "@col2";
dataGridCol2.headerText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit";
dataGridCol2.headerRenderer = new ClassFactory(Label);
dataGrid = new DataGrid();
dataGrid.dataProvider = xmlDP.node;
dataGrid.columns = [dataGridCol1, dataGridCol2];
dataGrid.width = 300;
dataGrid.height = 200;
addChild(dataGrid);
}
]]>
</mx:Script>
</mx:Application>


{ 10 comments… read them below or add one }
simple but effective – great tip. thanks.
Is there any way that you can use the headerrenderer to make the column headers angled?
Thanks
How do I achieve the same in actionscript? I am building my datagrid dynamically. Thanks
Ambika,
Something like this should work (I’ll also update the entry above and add this new example):
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.DataGrid; import mx.controls.Label; private var xmlDP:XML = <nodes> <node col1="One.1" col2="One.2" /> <node col1="Two.1" col2="Two.2" /> <node col1="Three.1" col2="Three.2" /> <node col1="Four.1" col2="Four.2" /> <node col1="Five.1" col2="Five.2" /> <node col1="Six.1" col2="Six.2" /> <node col1="Seven.1" col2="Seven.2" /> <node col1="Eight.1" col2="Eight.2" /> <node col1="Nine.1" col2="Nine.2" /> </nodes>; private var dataGrid:DataGrid; private var dataGridCol1:DataGridColumn; private var dataGridCol2:DataGridColumn; private function init():void { dataGridCol1 = new DataGridColumn(); dataGridCol1.dataField = "@col1"; dataGridCol1.headerText = "The quick brown fox jumped over the lazy dog"; dataGridCol1.headerRenderer = new ClassFactory(Label); dataGridCol2 = new DataGridColumn(); dataGridCol2.dataField = "@col2"; dataGridCol2.headerText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"; dataGridCol2.headerRenderer = new ClassFactory(Label); dataGrid = new DataGrid(); dataGrid.dataProvider = xmlDP.node; dataGrid.columns = [dataGridCol1, dataGridCol2]; dataGrid.width = 300; dataGrid.height = 200; addChild(dataGrid); } ]]> </mx:Script> </mx:Application>Peter
I’d like to be able to force the tool-top regardless of overflow, any ideas?
Hi,
You have a great site. I have started to work on flex just 2 months ago and your site was of great help for me. I have one question, is there a way that i can resize my datagrid columns according to the hearder length?
Thanks,
Geetha
Hi,
Is it possible to display tooltip different than headerText? I need to do that in one of the pages.
Thanks,
Rashmi
Just one small note: this will prevent sort arrows from being displayed automaticaly – at least in advanced datagrid
Setting headerRenderer=”mx.controls.Label” it works perfectly for the tooltip but the alignment of the title is fixed to top-left.
Is it possible to change this alignment?
perfect and simple – thx a lot!