0 Replies Latest reply on Nov 24, 2010 7:08 PM by YuHsin4221123

    Create a tooltip in AdvancedDataGrid

    YuHsin4221123 Level 1

      Hi,

       

      I would I to ask how to create a tooltip in AdvancedDataGrid.

       

      I created a new MXML component named CustomToolTip, based on a VBox.

       

      This is my code for custom tooltip:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
               implements="mx.core.IToolTip"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:services="services.*">
          
      <fx:Script>
         <![CDATA[
          import mx.controls.Alert;
          import mx.events.FlexEvent;

       

          [Bindable]
          public var _dataId:String;
          protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
          {
              var dataid:String;
              dataid = _dataId;
              getSpecificUserDataCResult.token = twitterSentimentManager.getSpecificUserDataC(dataid);
          }
         
          protected function dataGrid2_creationCompleteHandler(event:FlexEvent):void
          {
              var dataid:String;
              dataid = _dataId;
              getSpecificUserDataUResult.token = twitterSentimentManager.getSpecificUserDataU(dataid);
          }
         
          public var _text:String;
          public function get text():String {
              return _text;
          }
         
          public function set text(value:String):void {
             
          }
          ]]>
      </fx:Script>

       

      <fx:Declarations>
          <s:CallResponder id="getSpecificUserDataCResult"/>
          <services:TwitterSentimentManager id="twitterSentimentManager" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
          <s:CallResponder id="getSpecificUserDataUResult"/>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
      <s:Panel width="401" height="300">
          <mx:Image x="52" y="10" width="105" height="91" creationComplete="dataGrid_creationCompleteHandler(event)" source="{getSpecificUserDataUResult.lastResult[0].category}"/>
          <s:Label x="197" y="22" text="Username"/>
          <s:Label x="197" y="55" text="Name"/>
          <s:Label x="197" y="89" text="Bio Info"/>
          <s:Label x="261" y="22" id="username0" text="{getSpecificUserDataUResult.lastResult[0].userID}"/>
          <s:Label x="261" y="55" id="name0" text="{getSpecificUserDataUResult.lastResult[0].name}"/>
          <s:Label x="261" y="89" id="bioinfo0" text="{getSpecificUserDataUResult.lastResult[0].bioData}"/>
          <s:Label x="52" y="140" text="Content"/>
          <s:TextArea x="105" y="140" height="90" text="{getSpecificUserDataCResult.lastResult[0].content}"/>
      </s:Panel>
      <mx:DataGrid id="dataGrid2" creationComplete="dataGrid2_creationCompleteHandler(event)" dataProvider="{getSpecificUserDataUResult.lastResult}" visible="false">
          <mx:columns>
              <mx:DataGridColumn headerText="userID" dataField="userID"/>
              <mx:DataGridColumn headerText="weeklyInfluentialIndex" dataField="weeklyInfluentialIndex"/>
              <mx:DataGridColumn headerText="following" dataField="following"/>
              <mx:DataGridColumn headerText="category" dataField="category"/>
              <mx:DataGridColumn headerText="follower" dataField="follower"/>
              <mx:DataGridColumn headerText="bioData" dataField="bioData"/>
              <mx:DataGridColumn headerText="location" dataField="location"/>
              <mx:DataGridColumn headerText="influentialIndex" dataField="influentialIndex"/>
              <mx:DataGridColumn headerText="name" dataField="name"/>
          </mx:columns>
      </mx:DataGrid>
      <mx:DataGrid id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getSpecificUserDataCResult.lastResult}" visible="false">
          <mx:columns>
              <mx:DataGridColumn headerText="content" dataField="content"/>
              <mx:DataGridColumn headerText="userID" dataField="userID"/>
              <mx:DataGridColumn headerText="sentiment" dataField="sentiment"/>
              <mx:DataGridColumn headerText="dateTime" dataField="dateTime"/>
              <mx:DataGridColumn headerText="contentID" dataField="contentID"/>
          </mx:columns>
      </mx:DataGrid>
         
         
      </mx:VBox>

       

       

       

       

       


      This is the code for AdvancedDataGrid "AllSentiments.mxml" :

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:component="component.*, com.hillelcoren.components.*"
                 xmlns:components="com.hillelcoren.components.*"
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:services="services.*"
                 close="titleWindow_close(event)" title="Sentiments">
      <fx:Script>
          <![CDATA[
              import mx.containers.TitleWindow;
              import mx.controls.Alert;
              import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
              import mx.events.CloseEvent;
              import mx.events.FlexEvent;
              import mx.events.ListEvent;
              import mx.events.ToolTipEvent;
              import mx.managers.PopUpManager;
             
              import spark.components.IItemRenderer;
              import spark.components.TitleWindow;
             
             
              [Bindable]
              public var _currentCountryName:String;
              protected function myADG_creationCompleteHandler(event:FlexEvent):void
              {
                  var currentCountryName:String;
                  currentCountryName = _currentCountryName;
                  getSpecificCountryResult.token = twitterSentimentManager.getSpecificCountry(currentCountryName);
              }
             
              private function createCustomToolTip(event:ToolTipEvent):void {
                  var toolTip:CustomToolTip = new CustomToolTip();
                  var dataid:String = AdvancedDataGridItemRenderer(event.itemRenderer).data.userID;
                  toolTip._dataId = dataid;           
                  event.toolTip=toolTip;
              }
             
              private function deleteToolTip(event:ListEvent):void {
                  myADG.toolTip = null;
              }
                 
              ]]>
      </fx:Script>
      <fx:Declarations>
          <s:CallResponder id="getSpecificCountryResult" result="getSpecificCountryCollection.refresh()"/>
          <services:TwitterSentimentManager id="twitterSentimentManager" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
          <mx:GroupingCollection2 id="getSpecificCountryCollection" source="{getSpecificCountryResult.lastResult}">
              <mx:Grouping>
                  <mx:GroupingField name="sentiment"/>
              </mx:Grouping>
          </mx:GroupingCollection2>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
      <mx:AdvancedDataGrid x="48" y="50" id="myADG" designViewDataType="tree" toolTipCreate="createCustomToolTip(event)" selectedIndex="0" creationComplete="myADG_creationCompleteHandler(event)" dataProvider="{getSpecificCountryCollection}">
          <mx:columns>
              <mx:AdvancedDataGridColumn headerText="sentiment" dataField="sentiment"/>       
              <mx:AdvancedDataGridColumn headerText="userID" dataField="userID"/>
              <mx:AdvancedDataGridColumn headerText="dateTime" dataField="dateTime"/>
          </mx:columns>
      </mx:AdvancedDataGrid>
      /s:TitleWindow>

       

       

       


      I got an error:  "1119: Access of possibly undefined property itemRenderer through a reference with static type mx.events:ToolTipEvent."

       

      May I know where I have done wrong?

       

      Thanks