If you want to make your own headerRenderer, then it is obviously very simple to just set the toolTip property in your renderer. But I was curious if it could easily be done with out a custom header renderer. My solution was to create a new class which extended DataGridColumn and adds three new properties: headerToolTip, headerToolTipPosition, and headerTextTruncate (which adds the "..." if the headerText is too long to fit).
Here is the simplified version of the MXML code:
<mx:DataGrid x="10" y="10" width="500" height="130" dataProvider="{employees}">
<mx:columns>
<ui:DataGridToolTipColumn headerText="Phone" dataField="phone" width="90"
headerToolTip="Phone Number (tooltip above)" headerToolTipPosition="above"/>
</mx:columns>
</mx:DataGrid>
<mx:columns>
<ui:DataGridToolTipColumn headerText="Phone" dataField="phone" width="90"
headerToolTip="Phone Number (tooltip above)" headerToolTipPosition="above"/>
</mx:columns>
</mx:DataGrid>
The headerToolTipPosition property can have the following values:
And here is the example (right-click View Source for the full source code):
Feel free to use this code or modify it to your own needs.
** Updated on September 16th 2009
17 comments:
Nice one, it seems to work really well! Trying this out I notice that a couple minor things:
First, that it seems to ignore headerWordWrap=true on the DGC. This is actually not really a problem given that in this case we have the convenience of a tooltip to anyhow be able to show all the text.
Secondly, when no headerToolTip is defined on the DGC, it seems that you use the header text as default tooltip text. If in some cases we wish to explicitly not have a tooltip show up, it seems we'd need to explicitly set headerToolTip="" (i.e. to empty string) ?
Thanks for the comment Mario.
I've fixed the code above to work as you expected - the headerWordWrap now works, and if the headerToolTip is not defined then no tooltip is shown.
I downloaded your updated zip... perfect, thanks! They are really minor nitpicks, but they do make this component even neater. (Note, doing View Source on the inlined swf still gives the old source). Thanks again... mario
ps: I see you are a big runner & live in sunny Victoria! Incidentally, I'll be running the Fyne Nature Marathon (Yverdon to Neuchâtel, Suisse) this sunday & I used to live in Van City... ;-!
Hey Mario,
I think the View Source is up to date now, thanks.
Sadly I'm not running much these days due to a knee injury. I'm dying to get back out there and run another marathon (I've only done one - the Royal Victoria), but that will have to wait until next year... Best of luck on Sunday! Looks like a fun marathon.
Chris
I just tried the latest code and it works great!
I did notice that if you truncate the text and then resize the column you get a ToolTipManager exception (when using the Flash Debug 10 plugin).
Code:
<ui:DataGridToolTipColumn headerText="Date Shipped" dataField="dateshipped" headerToolTip="Date Shipped" headerTextTruncate="true" headerToolTipPosition="above"/>
Is this something other people have eperienced?
Hi JT,
I certainly haven't seen any errors, and I tried using your code too and no problems. Does it give you a stack trace when you get the error? I'd be curious to see it.
Chris
It turns out that the issue I was receiving was because I was using the Flex SDK 3.2.0 and not the latest SDK 3.4.0 - which seems to have resolved the issue.
Good to know JT, thanks for posting.
This is cool! This code worked great for me. Thanks!
Great component... thanks!
Didn't like my itemRenderer
...
But then I realised that I forgot the to change the prefix from 'mx' to 'ui' Doh! : )
Great script mate thanks for sharing!
I need to sort a column as numeric. I've tried a couple of ways but doesn't work with ui:DataGridToolTipColumn... sortCompareFunction="myCompareFunc", any ideas
To sort a column as numeric, try this:
column:
<mx:DataGridColumn dataField="num" headerText="Number"
sortCompareFunction="sortNumbers"/>
sort function:
private function sortNumbers(a:Object, b:Object):int {
return ObjectUtil.numericCompare(a.num, b.num);
}
If you want the data initially sorted, you can sort like this.
Array (smallest numbers first)
array.sort(Array.NUMERIC);
or to put biggest numbers first:
array.sort(Array.NUMERIC | Array.DESCENDING);
ArrayCollection (sorting on the "num" property):
ac.sort = new Sort();
ac.sort.fields = [new SortField("num", false, false, true)];
ac.refresh();
Cheers dude, very handy!
One question--why are you overriding a headerRenderer with an itemRenderer? I was overriding the headerRenderer already to add background colors, and now this is gunking up the works.
The headerRenderer is what actually displays the tooltip, so it is required if you want a tooltip on the header! It also controls the positioning of the tooltip (above, below, etc).
You should be able to merge my HeaderRenderer helper class with your existing header renderer to get the combined functionality. You can right click view source on the example above, and look inside the flex.utils.ui.DataGridToolTipColumn.as file.
This is excellent post. I tried it and it worked like charm for datagrid. However, I need similar implmentation for advancedDataGrid. I tried replacing Datagrid and DatagridColumn class with AdvancedDatagrid counterparts; however it didn't work. I would be great help if you have working implementation for advancedDatagrid
Post a Comment