0 Replies Latest reply on Sep 15, 2011 5:20 AM by devika krishnamurthy

    Display a toolTip in an ImageItemRenderer on mouseover with AdvancedDataGrid

    devika krishnamurthy

      I  have an AdvancedDataGrid that uses HierarchicalData to display data in a  tree format. For one of the columns, I'm using an  AdvancedDataGridRendererProvider to display an image to the right of the  label at depth 2.  On mouseover of the image, some information should  be displayed. But when I tried, the image overrides the label text.. Can  someone help me to resolve it.. I have implemented the code as below..

       

      Sample AdvancedDataGrid code:-

       

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*">

       

      <fx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.controls.Alert;
          import mx.events.FlexEvent;
         
          [Bindable]
              private var dpHierarchy:ArrayCollection = new ArrayCollection([
                  {Region:"Southwest", children: [
                      {Region:"Arizona", children: [
                          {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
                          {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}, 
                      {Region:"Central California", children: [
                          {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}, 
                      {Region:"Nevada", children: [
                          {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}, 
                      {Region:"Northern California", children: [
                          {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
                          {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}, 
                      {Region:"Southern California", children: [
                          {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
                          {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
                  ]}
              ]);
             
          ]]>
      </fx:Script>

       

      <mx:AdvancedDataGrid id="myADG"
      width="100%" height="100%"
      variableRowHeight="true">
      <mx:dataProvider>
      <mx:HierarchicalData source="{dpHierarchy}" childrenField="children"/>
      </mx:dataProvider>
          <mx:columns>
              <mx:AdvancedDataGridColumn dataField="Region"/>
              <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                         headerText="Territory Rep"/>
              <mx:AdvancedDataGridColumn dataField="Actual"/>
              <mx:AdvancedDataGridColumn dataField="Estimate"/>
          </mx:columns>

       

      <mx:rendererProviders>           
          <mx:AdvancedDataGridRendererProvider
          columnIndex="0"
          depth="2"
          renderer="showImage"
          />        
      </mx:rendererProviders>  
      </mx:AdvancedDataGrid>
      </s:Application>

       

      And the sample renderer code:-

       

      <mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               paddingLeft="2" paddingRight="2" paddingTop="2"
               horizontalScrollPolicy="off"
               verticalScrollPolicy="off"
               height="22"
               horizontalAlign="center">
          <fx:Script>
              <![CDATA[
                  import mx.controls.ToolTip;
                  import mx.events.FlexEvent;
                  import mx.managers.ToolTipManager;
                  [Embed(source="/assets/images/icon_info.png")]
                  [Bindable]
                  private var myIcon:Class;
                 
                  private var commentsToolTip:ToolTip;
                 
                  override public function set data(value:Object):void{
                      super.data = value;
                      if (value["Region"] != null){
                          if (value["Region"].toString().length > 0){
                              myImage.visible = true;
                          }
                          else{
                              myImage.visible = false;
                          }
                      }
                      else{
                          myImage.visible = false;
                      }
                      validateDisplayList();
                  }
                 
                  private function showToolTip(evt:Event, text:String):void{
                      var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);               
                      pt = evt.currentTarget.parent.contentToGlobal(pt);               
                      commentsToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "") as ToolTip;               
                  }
                 
                  private function killToolTip():void{
                      ToolTipManager.destroyToolTip(commentsToolTip);
                  }
              ]]>
          </fx:Script>
          <mx:Image id="myImage"
                    source="{myIcon}"
                    mouseOver="showToolTip(event, data[Region].toString())"
                    mouseOut="killToolTip()" />
      </mx:HBox>