0 Replies Latest reply: Feb 10, 2013 5:57 PM by aspiring_ToBeProgramer RSS

    My custom Tool tip on spark data Grid don't work ?


      I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.

      I came across :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html  where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.

      So my question :

      Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.

      I have been struggling for quite some time.If possible pls Give me an example.

      This is my codes below (I tried to follow the example from :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2d b454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")


      My MXML Application codes :



              import DesignItemRenderer.PanelToolTip;
              import mx.events.ToolTipEvent;

              import mx.collections.ArrayCollection;         
              import mx.controls.Alert;  
              import spark.events.GridEvent; 

              private var myArrivalShips:ArrayCollection = new ArrayCollection([
                  {arrivalShipsName:"Ship A", ETD:"12 March"},
                  {arrivalShipsName:"Ship B", ETD:"25 March"}            

              private function createCustomTip(event:ToolTipEvent):void {
                  var ptt:PanelToolTip = new PanelToolTip();
                  ptt.title = "my Ship Info";
                  ptt.bodyText = "my data for the ship";
                  event.toolTip = ptt;

      <s:BorderContainer x="267" y="11" width="331" height="586">

      <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" toolTipCreate="createCustomTip(event)">
      <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships" ></s:GridColumn>
      <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>             

      <s:BorderContainer x="10" y="19" width="302" height="285">




      My Custom Panel codes :


      <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
      implements="mx.core.IToolTip" >
      <!-- Place non-visual elements (e.g., services, value objects) here -->
              public var bodyText:String = "";

              //  Implement required methods of the IToolTip interface; these
              //  methods are not used in this example, though.
              public var _text:String;

              public function get text():String {
                  return _text;
              public function set text(value:String):void {
      <s:RichText text="{bodyText}" percentWidth="100"/>