Flex : How to have tooltip on every Row of DataGrid

On January 13, 2008, in Flex, by Anuj Gakhar

If you have a DatGrid and you want to display row specific data on mouseOver, here is how this can be done.

The first step is to enable showDataTips property for every DataGridColumn that you want to enable this functionality on.
Secondly, you need to have a dataTipFunction function on the DatGrid itself. Because dataTipFunction passes over the Grid row data as an Object to the calling function, you dont need to pass any arguments to it. Here is a little example that shows how to do it.

[as3]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="doInit();">
<mx:Script>
<!![CDATA[import mx.collections.ArrayCollection; // this holds the grid data
[Bindable]
private var myData:ArrayCollection = new ArrayCollection();private function doInit():void{
myData.addItem({fname:"Joe",lname:"Bloggs"});
myData.addItem({fname:"Joe1",lname:"Bloggs"});
}

private function buildToolTip(item:Object):String{
var myString:String = "";
if(item != null)
{
myString = myString + "Firstname : " + item.fname + "\n";
myString = myString + "Lastname : " + item.lname + "\n"
}
return myString;
}
]]>
</mx:Script>
<mx:DataGrid id="dGrid" dataProvider="{myData}" visible="true" dataTipFunction="buildToolTip">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="FirstName" showDataTips="true" />
<mx:DataGridColumn dataField="lname" headerText="LastName" showDataTips="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>[/as3]

Tagged with:  

39 Responses to Flex : How to have tooltip on every Row of DataGrid

  1. JB says:

    Awesome! This is exactly what I was looking for!

  2. PSamanth says:

    Yeap! I too want the Solution for this

  3. Sari says:

    HI,
    How do we display tooltip in html data grid (cfgrid)?

    Thanks,
    Sari

  4. Anuj Gakhar says:

    @Sari, cfgrid is a completely different implementation. Its using Extjs library behind the scenes and you might want to look into the documentation for that.
    Hope that gives you some pointers.

  5. manav says:

    Thanks for the post. How do I make it to display the name of the column, when i take the mouse on it. Would be really great if you could help me.

  6. Anuj Gakhar says:

    @manav, I havent tried but give this one a try.

    myString +=DataGridColumn(item.element).headerText;

    inside the buildTooltip() function ofcourse.

  7. manav says:

    @Anuj,thanks for the reply. But it doesnt work. It gives me a null error on DataGridColumn(item.element).headerText … any thoughts on the work around.. thanks in advance….

  8. Anuj Gakhar says:

    @manav, can you paste the code of your buildToolTip function here ?

  9. Ben says:

    How do you position the tool tip? The default positioning is unfortunate.

  10. Anuj Gakhar says:

    Hi Ben,

    You might find this post useful.
    http://axel.cfwebtools.com/index.cfm/2007/3/30/Use-a-Datatip-for-each-record-in-a-DataGrid-in-Flex-and-a-memory-consumption-note

    Its got some links in there in the comments which would answer your specific question.

  11. Marga says:

    Thank’s Anuj!! That’s just what I was looking for !

  12. BHASKAR DATTA says:

    Thanks a lot, the above code has helped me out to add row level data tooltip to a datagrid.

  13. Rick Veenstra says:

    Thanks a lot! This page really helped me right away with the problem!

  14. Rick Veenstra says:

    Anuj you mentioned the link http://axel.cfwebtools.com/index.cfm/2007/3/30/Use-a-Datatip-for-each-record-in-a-DataGrid-in-Flex-and-a-memory-consumption-note in a comment above. Only I can’t see the comments on that side.

    Is there a way you can explain the positioning of the tooltip in a datagrid here as well?

  15. Anuj Gakhar says:

    Hi Rick, That link seems to have changed now. Here is another link that might help.
    http://groups.google.com/group/flex_india/browse_thread/thread/65ea0c5f6c9e3cb4

  16. Andy says:

    Thanks dude, that just what I neened

  17. kk says:

    This is too good. This is what I am looking for as how to do it

  18. LJ says:

    Thanks for posting Anuj, exactly what I was looking for.

  19. vkwave says:

    Thanks brilliant example Anuj. This is what i actually fighting for.

  20. fratleave says:

    Thanks so much! Helped me a lot!

  21. Rory says:

    Thanks Anuj, this is the post that keeps on helping! Just used it to grab the XML node from my DataGrid row and use it in the tip, pretty cool.

  22. Jason says:

    Thank Anuj , Fix my issue , and is making it easy to use and beautiful 🙂

  23. Nauman Khan says:

    Thanks a lot but i have a different problem.
    dataTipFunction is called when grid is populated. What if we need to show tooltip on MouseOver? I mean what if data to be shown is available on MouseOver and not when populating the grid?

  24. Carlos says:

    I found that it doesn’t work when the DataGridColumn is working with an itemRenderer, this way:

    #############################################

    #############################################

    The tooltip won’t be shown. Any idea?

  25. Carlos says:

    Mmm it looks like I can’t post code.. but that’s the problem, when the DataGridColumn is working with an itemRenderer.

  26. Suji says:

    Exactly, i expect this…Thanks

  27. Carlos says:

    Back again.. How can I set the CSS Style for the tooltip?

    I’m using:

    mx|ToolTip

    for some “normal” tooltips, it seems not to affect this kind of toolTips.

    Thanks.

  28. faryredfox says:

    Thanks a lot,it’s a big help for me.
    十分感谢大侠赐教。。。

  29. sundar says:

    am using item renderer in a column of a datagrid….
    wanna show tooltip for tat column also…

  30. Divya Agarwal says:

    I want to show a panel on datatipfunction of datagrid displaying the information of each row of datagrid.plz help me for same

  31. Bishnu says:

    Hi I have a grid with tooltip on each row. I opened tooltip when user clicked on perticular row. Now I need to show tooltip until mouse is on that tooltip and after mouse moveout tooltip disapears.

    Exactily im trying to load panel on that tooltip.

    Please help to try this out.

    Thanks

  32. Nisha says:

    It doesn’t work for AdvanceDataGridColumn.

  33. Michael says:

    yeah, the same to me, tips only shown on the header.

Leave a Reply to Divya Agarwal Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: