Flex Tooltip containing datagrid

Many times for datagrids or dropdowns or images, you display tooltip to show additional information or may be because the column width or the dropdiwdth width is not enough for the text displayed in it. But sometimes you may have to show a data grid in the tooltip. Like for example, you have a check number displayed in your table but when someone hovers over the check number, you want to show the Check Number, Check Date and Check Amount as a grid in the tooltip. Or another example where you have a student list in your datagrid and you want to show the credits for each subject the student opted in the tooltip. Look at this and you may want to display the information as below.


Tooltip containing Datagrid



Here when I hovered on "Multiple", a tool tip with a datagrid is displayed.

How do we display a datagrid in the tooltip? Very easy.. Very very simple. Write an item renderer that contains custom tooltip and set that item renderer as itemRenderer for the column of the datagrid.

If you look at below sample code, I have created ToolTipDataGridItemRenderer and set it as itemRenderer for CreditInfo column.


<mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{initDG}" >
  <mx:columns>
	<mx:DataGridColumn dataField="Name" />
	<mx:DataGridColumn dataField="Year" />
	<mx:DataGridColumn dataField="CreditInfo" 
itemRenderer="com.jusfortechies.tooltip.ToolTipDataGridItemRenderer"/>
  </mx:columns> 
</mx:DataGrid>


Below sample code is the itemRenderer I was talking about. You can download the complete sample project at the end of this article. Anyways, lets come back and see the item renderer class. The magic lies in "toolTipCreate = 'createCustomTip(event);" of below code. What we are doing here is, create anything you want (it could be even an image) and set it to the "event.tooltip".


<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingLeft="1"
	paddingRight="1"
	toolTip=" "
	toolTipCreate="createCustomTip(event);"
	>
	
<mx:Script>
  <![CDATA[
  import mx.controls.dataGridClasses.DataGridColumn;
  ......

  [Bindable] 
  private var toolTipInfo:String;

  private var creditDetails:Array;

  override public function set data(value:Object):void {

    super.data = value;

    creditDetails = data[(listData as DataGridListData).dataField] as Array;
    toolTipInfo = "Multiple";
  }

  private function createCustomTip(event:ToolTipEvent):void {
    
	if(creditDetails != null && creditDetails.length > 0){

	var creditDetailsToolTip:ConfigurableToolTip 
				= new ConfigurableToolTip();

	//Create a datagrid and set the dataprovider
	var tooltipDg:DataGrid = new DataGrid();
	.....
	var cols:Array = tooltipDg.columns;

	var dgCol:DataGridColumn;

	dgCol = new DataGridColumn("Subject");
	cols.push(dgCol);

	.....

	tooltipDg.columns = cols;	
	tooltipDg.dataProvider = creditDetails;

	//Add datagrid to the VBox
	creditDetailsToolTip.addChild(tooltipDg);

	//Set the VBox to the tooltip
	event.toolTip = creditDetailsToolTip;
    }else{
	event.toolTip = null;
    }
  }

 ]]>
</mx:Script>
	
<mx:text>{toolTipInfo}</mx:text>
</mx:Text>


In this sample code, I have used a class called "ConfigurableToolTip" (See below sample code which is ConfigurableToolTip). Its a simple VBox that implements "mx.core.IToolTip" to act as tooltip. Inside this VBox we are setting the datagrid. You can add an image to this VBox and display the image as tooltip too. Sounds fun ah...

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
implements="mx.core.IToolTip" width="300">
    <mx:Script><![CDATA[
        
        //  Implement required methods of the IToolTip interface
        public var _text:String;

        public function get text():String { 
            return _text; 
        } 
        public function set text(value:String):void {
        } 
    ]]></mx:Script>


</mx:VBox>

Just a simple renderer is what you need. Thats all. Magic. You can download the example source code.

Download the example code.





blog comments powered by Disqus