Skip navigation
aspiring_ToBeProgramer
Currently Being Moderated

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

Feb 10, 2013 5:57 PM

Tags: #flex #spark #datagrid. #tooltips

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/WS2db454920e96a9e51e63e3d11c0bf 60d65-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/WS2db454920e96a9e51e63e3d11c0bf 60d65-7ff6.html#WS2db454920e96a9e51e63e3d11c0bf60d65-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>

 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points