Flex 3 AdvancedDataGrid dataTipFunction mess
Well Flex 3 with it's fancy AdvancedDataGrids is proving to be a little more than frustrating. All I wanted to do was show a dataTip on a hover on the datagrid row. It took me hours of research to figure out that there is a "bug":
http://bugs.adobe.com/jira/browse/FLEXDMV-1789
So if you have an Advanced Data Grid and you want to show a custom data tip on hover of a row this is basically how you should do it.
OH yes... that's right. It calls this beauty twice. If you don't have the if statement it will error out and your ap won't run. Sweet eh?
NOW.. if you're like me, you might be using an itemRenderer on that column. You try out the datatip stuff above and curse me because it doesn't work. Yeah. I know.
Inside your item renderer you're going to have to set the tooltip (that is if what you're extending has a tooltip). I usually extend label, so it works fine.
http://bugs.adobe.com/jira/browse/FLEXDMV-1789
So if you have an Advanced Data Grid and you want to show a custom data tip on hover of a row this is basically how you should do it.
private function testTip(item:Object):String
{
if (item is AdvancedDataGridColumn)
return "This is a header tip"
else
return "This is a data tip";
}
OH yes... that's right. It calls this beauty twice. If you don't have the if statement it will error out and your ap won't run. Sweet eh?
<mx:AdvancedDataGrid
id="mainADG"
width="100%" height="100%"
dataTipFunction="testTip">
[...]
<mx:AdvancedDataGridColumn
dataField="Name"
headerText="Name"
itemRenderer="com.view.renderers.myRenderer"
showDataTips="true"
/>
[...]
NOW.. if you're like me, you might be using an itemRenderer on that column. You try out the datatip stuff above and curse me because it doesn't work. Yeah. I know.
Inside your item renderer you're going to have to set the tooltip (that is if what you're extending has a tooltip). I usually extend label, so it works fine.
package com.view.renderers
{
import mx.controls.Label;
public class MyRenderer extends Label
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//Set the font color based on the item number.
setStyle("color", (data.myNumber<= 0) ? 'red' : 'green');
this.toolTip = "Here is my custom data/tool tip!";
}
}
}
Comments
here is my example:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var t_obj:Object = new Object;
this.toolTip = outerDocument.MagnifierTip(t_obj);
Thanks so much. This helped my poor head from banging even longer against the wall!