Flex : Tooltip on Fixed Width DataGrid Columns

On May 21, 2010, in Flex, by Anuj Gakhar

I was displaying some data in a DataGrid and a requirement came up to show tooltips on the columns which had more data than the column width. Since increasing the column width was not an option, the ideal solution was to show the the ellipses (“…”) at the end of the column and the rest of the text to be shown as tooltip on the DataGrid 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 Property and it has the truncateToFit set to true and it shows the tooltip by default.

So, here is what I ended up with.

[xml highlight=”9″]
<mx:DataGrid sortableColumns="false" draggableColumns="false"
dataProvider="{this.data}"
width="100%"
height="100%"
>
<mx:columns>
<mx:DataGridColumn dataField="Field1"  width="120" />
<mx:DataGridColumn dataField="Field2" />
<mx:DataGridColumn dataField="Field3"  itemRenderer="mx.controls.Label"/>
</mx:columns>
</mx:DataGrid>
[/xml]

Thought I will post it here as this can be useful.

Tagged with:  

6 Responses to Flex : Tooltip on Fixed Width DataGrid Columns

  1. rad_g says:

    You can also use showDataTips attribute on DataGridColumn.

  2. thiru says:

    Thanks I was thinking about this for some time.

  3. Ivan says:

    How to do it for spark datagrid’

  4. Tony says:

    I am using flexcious datagrid i have tried with ShowDataTips but it’s not working.also i have wrote one function and invoke from datafieldfunction still it’s not working also.Kindly suggest if is der any approach

Leave a Reply to rad_g Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: