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 ?

    aspiring_ToBeProgramer

      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 :

       

          <fx:Script>
          <![CDATA[

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

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

              [Bindable]
              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;
              }


          ]]>
      </fx:Script>
      <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:columns>
                 
      <s:ArrayList>
                     
      <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships" ></s:GridColumn>
                     
      <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>             
                 
      </s:ArrayList>
             
      </s:columns>           

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

      </s:BorderContainer>

       

       

      My Custom Panel codes :

       

      <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
          
      xmlns:s="library://ns.adobe.com/flex/spark"
          
      xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
          
      implements="mx.core.IToolTip" >
      <fx:Declarations>
         
      <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
      <fx:Script>
          <![CDATA[
              [Bindable]
              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 {
              }
          ]]>
      </fx:Script>
      <s:RichText text="{bodyText}" percentWidth="100"/>

      </s:Panel>