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.
<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>
Thought I will post it here as this can be useful.
If you enjoyed this article, please consider sharing it!
You can also use showDataTips attribute on DataGridColumn.
that shows the tooltip always. I wanted something that only shows up when text is more than the column width.
Thanks I was thinking about this for some time.
How to do it for spark datagrid’