Tuesday, November 25, 2008

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.


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!";
  }
 }
}

5 comments:

Alex said...

Thanks for this very helpful. Every time I need to something with flex it involves hours of looking through forums. Lets hope one day Adobe decide to write some decent documentation!

Adam said...

very helpful. using your code i was able to do this inline if you are not using a view for your itemrenderer

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);

mike said...

Thanks a bunch! I find I can do some pretty amazing things quickly in Flex, but some easy things take hours and hours to figure out.

Oraxia said...

Curiously enough, I am not using a custom item renderer and the above isn't working for me. I probably don't care enough about the data tips to add a custom renderer just to get them working, but it seems like you actually MUST have a custom item renderer to make this work.

Paul said...

Ang & Adam,

Thanks so much. This helped my poor head from banging even longer against the wall!