Custom Itemrender in Datagrid with Datatip

Question

I have a datagrid with one datagridcolumn in it. Without a custom itemrenderer I can use a datatipfunction for showing a custom datatip but now I want to have a custom item render for colouring the rows differently. Therefore I extended a label and changed the data method but now my datatipfunction does not work anymore.

Any ideas?

thanks in advance

Sebastian

Answer 1

I know this question is a wee bit old, however I just ran into the same problem and solved it by looking at how the standard DataGridItemRenderer class does it.

So basically I ended up copying that toolTipShowHandler() function into my class (without any modification), implementing the IDropInListItemRenderer interface and adding a few lines into my renderer's commitProperties() function, which were inspired by the DataGridItemRenderer, too.

Hope this helps.

Answer 2

I'm a little late to the party, but I ran into this issue with a custom DataGridItemRenderer for images. The solution described at the following link worked out nicely for me:

http://www.kalengibbons.com/blog/index.php/2008/12/displaying-datatips-when-using-an-itemrenderer/

The gist is that you override the item render's updateDisplayList() and set a tool tip by calling the dataTipFunction and/or using the dataTipField just like a built-in item renderer.

Answer 3

copying the content of link given by cbranch here. stackoverflow is more reliable for keeping code snippets

Displaying DataTips when using an itemRenderer

One of the bad things about using itemRenderers in a DataGridColumn is that you lose the dataTip functionality that it normally provides. Well, here is a way to fake that functionality.

First, add the dataTipField or dataTipFunction to the DataGridColumn like you normally would.

<mx:DataGridColumn  headerText="DataTip"
      dataField="name1"
      showDataTips="true"
      dataTipField="description1" />

Then, in your itemRenderer add the following code to be able to tap into that information and display a tooltip instead.

private function getToolTip():String{
    var dg:DataGrid = listData.owner as DataGrid;
    var func:Function = dg.columns[listData.columnIndex].dataTipFunction;
    if(func != null){
           return func.call(this, this.data);
    }else if(dg.columns[listData.columnIndex].dataTipField.length){
           return data[dg.columns[listData.columnIndex].dataTipField];
    }else{
           return "";
     }
 }

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
     super.updateDisplayList(unscaledWidth, unscaledHeight);
     this.toolTip = getToolTip();
  }

This works with both dataTipFields and dataTipFunctions and lets you treat the dataTips in your columns the same way, regardless of whether you’re using an itemRenderer or not. The only minor difference is the positioning of the label, but that can be easily modified with styles. You can download the full source code here, for a functional example of how this works.

source

Answer 4

Just off the top of my head, maybe make your custom item renderer extend DataGridColumn. This will give your item renderer all the functionality of a regular column.