Advanceddatagrid with custom tool tip and HTML content

 

<mx:AdvancedDataGrid width=”100%” height=”100%” dataProvider=”{orgData}” id=”iADG”
                         useRollOver=”false” creationComplete=”{onADGCreation();}”>
</mx:AdvancedDataGrid>
  

 
    private function onADGCreation():void
    {
        iADG.addEventListener(ShowToolTipEvent.ROLL_OVER, onIconRollOver);
        iADG.addEventListener(ShowToolTipEvent.ROLL_OUT, onIconRollOut);
        iADG.addEventListener(ShowToolTipEvent.MOUSE_WHEEL, onIconMouseWheel);
    }
    
    private var descToolTipMenu:HTMLToolTipComp = null;
        private var oTimer:Timer;
        private var startSecond:Number;
        private var menuDelayDuration:Number = 500; //delay duration for popup menu
        private var tooltipData:String;

        private function onIconRollOver(event:ShowToolTipEvent):void {
            tooltipData = event.toolTipText ;
            if(tooltipData == null)
                return;
            oTimer.stop();
            startTimer();
        }

        private function onIconRollOut(event:ShowToolTipEvent):void {
            oTimer.stop();
            if(descToolTipMenu==null) return;

            if(!descToolTipMenu.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }

        private function onIconMouseWheel(event:ShowToolTipEvent):void {
            hideMenu();
        }

        /**
         * Function: startTimer
         * This function is called from onRollOver function.
         */
        private function startTimer():void
        {
            var oDate:Date = new Date();
            startSecond = oDate.getTime();
            oTimer.start();
        }

        /**
         * Function: checkMouseDelayOnCell
         * This function is the listener for the timer oTimer, called after the delay period of timer.
         * In our case function is called after every 200 miliseconds.
         */
        private function checkMouseDelayOnCell(event:TimerEvent):void
        {
            var oDate:Date = new Date();
            //show the menu if the mouse is over the cell for the duration of menuDelayDuration
            if((oDate.getTime()-startSecond)>menuDelayDuration)    {
                showMenu();
                oTimer.stop();
            }
        }

        public function showMenu():void
        {
            if(descToolTipMenu!=null) return;

            descToolTipMenu = PopUpManager.createPopUp(this,HTMLToolTipComp,false) as HTMLToolTipComp;
            descToolTipMenu.toolTipText = tooltipData ;
            trace(‘current tooltipData[‘+tooltipData+’]’);
            descToolTipMenu.addEventListener(MouseEvent.ROLL_OUT,hideMenuOnRollOut);
            descToolTipMenu.maxHeight = FlexGlobals.topLevelApplication.screen.height ;
            descToolTipMenu.maxWidth = FlexGlobals.topLevelApplication.screen.width ;

            FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_MOVE,checkMouseOverMenu);

            var xPos:Number = FlexGlobals.topLevelApplication.mouseX
            var yPos:Number = FlexGlobals.topLevelApplication.mouseY

            descToolTipMenu.addEventListener(FlexEvent.UPDATE_COMPLETE,function(event:FlexEvent)
            {
                if(descToolTipMenu!=null)
                {
                    if(yPos+descToolTipMenu.height>FlexGlobals.topLevelApplication.screen.height)
                    {
                        yPos  = FlexGlobals.topLevelApplication.mouseY – (descToolTipMenu.height+10) ;
                    }
                    if(xPos+descToolTipMenu.width>FlexGlobals.topLevelApplication.screen.width)
                    {
                        xPos = FlexGlobals.topLevelApplication.mouseX – (descToolTipMenu.width+10) ;
                    }

                    descToolTipMenu.move(xPos,yPos);
                }

            });

        }

        private function hideMenu():void
        {
            if(descToolTipMenu!=null)
            {
                PopUpManager.removePopUp(descToolTipMenu);
                descToolTipMenu = null;
            }
        }

        private function hideMenuOnRollOut(event:MouseEvent):void
        {
            if(descToolTipMenu==null) return;

            var nx:Number=event.stageX;
            var ny:Number=event.stageY;

            if((nx<=descToolTipMenu.x || nx>=(descToolTipMenu.x+descToolTipMenu.width) || ny<=descToolTipMenu.y || ny>=(descToolTipMenu.y+descToolTipMenu.height))
                && !this.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }

        private function checkMouseOverMenu(event:MouseEvent):void
        {
            if(!this.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }
        
        
//——————ShowToolTipEvent.as——————————–//
package com.jpmorgan.myclient.events
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class ShowToolTipEvent extends MouseEvent
    {

        public static const ROLL_OVER:String=’mRollOver’;
        public static const ROLL_OUT:String=’mRollOut’;
        public static const MOUSE_WHEEL:String=’mWheel’;

        public var toolTipText:String;

        public function ShowToolTipEvent(type:String, value:String=””, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            this.toolTipText=value;
            super(type, bubbles, cancelable);
        }

        override public function clone():Event
        {
            return new ShowToolTipEvent(type, toolTipText);
        }
    }
}

//————-HTMLToolTipComp.mxml————————-//
<?xml version=”1.0″ encoding=”utf-8″?>
<s:TextArea xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
         xmlns:s=”library://ns.adobe.com/flex/spark”
         xmlns:mx=”library://ns.adobe.com/flex/mx”
          borderAlpha=”1″ borderVisible=”true” borderColor=”#000000″
         paddingLeft=”2″ paddingTop=”2″ paddingRight=”2″ paddingBottom=”2″ heightInLines=”{NaN}”
         contentBackgroundAlpha=”1″ contentBackgroundColor=”#ffffff” color=”#000000″
         verticalScrollPolicy=”off” updateComplete=”{onUpdateComplete();}”
        width=”250″>
    

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;

            [Bindable]private var _toolTipText:String ;

            public function get toolTipText():String
            {
                return _toolTipText;
            }

            public function set toolTipText(value:String):void
            {
                _toolTipText = value;
                showToolTip();
            }

            public function showToolTip():void
            {
                this.textFlow = TextConverter.importToFlow(
                    _toolTipText,
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }

            /**need to update */
            protected function onUpdateComplete():void
            {
                this.heightInLines = NaN ;
            }

        ]]>
    </fx:Script>

</s:TextArea>

Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: