DataGrid toolTip NOT headerText

coldchillin
coldchillin used Ask the Experts™
on
I'm trying to display a custom toolTip which is different from the headerText:

ID   Item
1    Disco Ball

Where the headerText "Item Name" would have a toolTip stating "Stuff you like to play with". Let's say the dataField in this example is "item".

Ultimately I'd like a function where I can use a switch statement on the columns dataField property:

switch (columnname) {
case "item":
str = "Stuff you like to play with";
break;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
mx:DataGrid  or mx:AdvancedDataGrid ?

Author

Commented:
In this case: mx:DataGrid
Top Expert 2011
Commented:
Ok,
Create a custom header class

HeaderRenderer.as

package
{
	import mx.controls.dataGridClasses.DataGridItemRenderer;
	import mx.controls.dataGridClasses.DataGridListData;

	public class HeaderRenderer extends DataGridItemRenderer
	{
		override public function set toolTip(value:String):void{
			if(listData is DataGridListData){
				var dataField:String = DataGridListData(listData).dataField;
				switch(dataField){
					case "name":
						value = "My Name";
						break;
					case "phone":
						value = "My Phone";
						break;
					case "email":
						value = "My Email";
						break;
				}
			}
			super.toolTip = value;
		}
	}
}

Open in new window


And use in your DataGrid Columns

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">

	<mx:XMLList id="employees">
		<employee>
			<name>Christina Coenraets</name>
			<phone>555-219-2270</phone>
			<email>ccoenraets@fictitious.com</email>
			<active>true</active>
		</employee>
		<employee>
			<name>Joanne Wall</name>
			<phone>555-219-2012</phone>
			<email>jwall@fictitious.com</email>
			<active>true</active>
		</employee>
		<employee>
			<name>Maurice Smith</name>
			<phone>555-219-2012</phone>
			<email>maurice@fictitious.com</email>
			<active>false</active>
		</employee>
		<employee>
			<name>Mary Jones</name>
			<phone>555-219-2000</phone>
			<email>mjones@fictitious.com</email>
			<active>true</active>
		</employee>
	</mx:XMLList>

	<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
		<mx:columns>
			<mx:DataGridColumn dataField="name" headerText="Name" headerRenderer="HeaderRenderer"/>
			<mx:DataGridColumn dataField="phone" headerText="Phone" headerRenderer="HeaderRenderer"/>
			<mx:DataGridColumn dataField="email" headerText="Email" headerRenderer="HeaderRenderer"/>
		</mx:columns>
	</mx:DataGrid>

</mx:Application>

Open in new window

Top Expert 2011

Commented:
You can also can change position of tooltip

override protected function toolTipShowHandler(event:ToolTipEvent):void{
    event.toolTip.move(stage.mouseX, stage.mouseY);
}

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial