Using itemRenderer in mx Datagrid - actionscript-3

I have a mx DataGrid with 2 column. The first column has its data rendered in a TextInput and the second column renderer in a ComboBox. When I change the selected value in the ComboBox, I want the TextInput of the same index to have its text changed to the value selected in the ComboBox. Can anyone help me with this? My code is below.
<mx:DataGrid id="myGrid" rowHeight="25" dataProvider="{Testarray}" width="100%" height="205" chromeColor="#D0CCAF" headerHeight="0" showHeaders="false" >
<mx:columns>
<mx:DataGridColumn headerText="My Header 1"
editable="true"
dataField="LBL"
>
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="left" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<s:TextInput id="label_txt" text="{data.LBL}" width="98%"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="My Header 2"
editable="true"
rendererIsEditor="true"
dataField="ALIAS"
>
<mx:itemRenderer>
<fx:Component>
<renderers:comboItemRenderer height="80%" change="comboitemrenderer1_changeHandler(event)" lookupField="ALIAS" labelField="ALIAS" dataProvider="{outerDocument.searchCustomizationComponents_array}">
<fx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.events.ListEvent;
protected function comboitemrenderer1_changeHandler(event:ListEvent):void
{
//WHAT TO PUT HERE?
}
]]>
</fx:Script>
</renderers:comboItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

I got it myself. Thanks buddies.
I needed to add these 2 lines of codes for the textInput to take the value of the selectedItem int he ComboBox.
protected function comboitemrenderer1_changeHandler(event:ListEvent):void
{
outerDocument.myGrid.dataProvider[outerDocument.myGrid.selectedIndex]['LBL'] = this.selectedItemKey;
outerDocument.myGrid.invalidateList();
}
Also note that the code for my comboitemrenderer below:
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
dataChange="setSelected()"
change="onSelectionChange(event)"
focusEnabled="true">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.DataGridListData;
private var _ownerData:Object;
private var _lookupField:String = "value";
// When using this component as an itemEditor rather than an itemRenderer
// then set ' editorDataField="selectedItemKey"' on the column to
// ensure that changes to the ComboBox are propogated.
[Bindable] public var selectedItemKey:Object;
public function set lookupField (value:String) : void {
if(value) {
_lookupField = value;
setSelected();
}
}
override public function set data (value:Object) : void {
if(value) {
_ownerData = value;
setSelected();
}
}
override public function get data() : Object {
return _ownerData;
}
private function setSelected() : void {
if (dataProvider && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
for each (var dp:Object in dataProvider) {
if (dp[_lookupField] == _ownerData[col.dataField]) {
selectedItem = dp;
selectedItemKey = _ownerData[col.dataField];
return;
}
}
}
selectedItem = null;
}
private function onSelectionChange (e:ListEvent) : void {
if (selectedItem && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
_ownerData[col.dataField] = selectedItem[_lookupField];
selectedItemKey = selectedItem[_lookupField];
}
}
]]>
</mx:Script>
</mx:ComboBox>

Related

DataGrid Image ItemRenderer --> How to change image source of other rows, not only the selected one

I have an Image in my DataGrid. Its purpose is to play and stop an audio, so I need to change the image source from the "Play" image to the "Stop" image every time I click on it.
I've already accomplished that with the next code:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List"
horizontalScrollPolicy="off" verticalScrollPolicy="auto"
showCloseButton="true" close="closeWindow()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.collections.ArrayCollection;
import mx.managers.PopUpManager;
public var dpc:ArrayCollection;
private function closeWindow(){
PopUpManager.removePopUp(this);
ExternalInterface.call("pauseAudio");
}
]]>
</mx:Script>
<mx:Rotate id="rotate" />
<mx:Zoom id="zoom" />
<mx:VBox width="100%" top="20">
<mx:Text fontWeight="bold" top="20" left="20">
<mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
</mx:Text>
<mx:DataGrid id="gridAudios" top="60" bottom="0" left="0" width="100%" height="100%" doubleClickEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="audioId"/>
<mx:DataGridColumn id="btnCol" dataField="url" headerText="" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Image click="changeImg(data.url)" toolTip="Play"
id="imgPlayStop" useHandCursor="true"/>
<mx:Script>
<![CDATA[
import mx.states.State;
import mx.collections.ArrayCollection;
[Embed(source='../assets/play-btn-small.png')]
[Bindable]
public var Play:Class;
[Embed(source='../assets/stop-btn-small.png')]
[Bindable]
public var Stop:Class;
private function init():void
{
imgPlayStop.source = Play
var statePlaying:State = new State();
var stateStopped:State = new State();
statePlaying.name="playing";
stateStopped.name="stopped";
var states:Array = new Array();
states.push(statePlaying);
states.push(stateStopped);
imgPlayStop.states = states;
imgPlayStop.currentState = "stopped";
}
private function changeImg(url:String):void{
if (imgPlayStop.currentState == "stopped"){
imgPlayStop.source = Stop;
imgPlayStop.currentState = "playing";
ExternalInterface.call("playAudio", url);
} else {
imgPlayStop.source = Play;
imgPlayStop.currentState = "stopped";
ExternalInterface.call("pauseAudio");
}
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:TitleWindow>
But the thing is that I want to change the image source of the other rows of the DataGridColumn.
For example, if I click in the play image of one row it changes to the stop image, everything OK till here.
If now I click the play image of other row, it also changes to the stop image, but the previous row still remains with the stop image, and I want to be only one stope image active.
In other words, I want to give the impression only one audio is playing. So only one of the rows can be with the "Stop" image while the rest must be with the "Play" image.
So, ¿how can I loop through the DataGridColumn items renderer and change their image source every time I click in on of the items renderer?
You can save prev imgPlayStop as public static variable in a Model class and use it
public class Model {
public static var prevImgPlayStop:Image;
}
in your itemRenderer do like this
private function changeImg(url:String):void{
if (Model.prevImgPlayStop) {
Model.prevImgPlayStop.currentState = "stopped";
}
/*your code*/
Model.prevImgPlayStop = imgPlayStop;
}
I post the SOLUTION I founded to my problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List"
horizontalScrollPolicy="off" verticalScrollPolicy="auto" width="510" height="340"
showCloseButton="true" close="closeWindow()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
import mx.controls.Alert;
[Embed(source='../assets/play-btn-small.png')]
var Play:Class;
[Embed(source='../assets/stop-btn-small.png')]
var Stop:Class;
[Blindable]
public var dpc:ArrayCollection;
private function titlewindow1_initializeHandler(event)
{
ExternalInterface.addCallback('onFinishAudio', onFinishAudio);
ExternalInterface.addCallback('onStartAudio', onStartAudio);
}
private function closeWindow(){
PopUpManager.removePopUp(this);
ExternalInterface.call("pauseAudio");
}
private function onFinishAudio(audioId:String) {
for ( var audio:Object in dpc )
{
if (audio.audioId == audioId){
audio.status = 'stopped';
}
}
gridAudios.dataProvider = dpc;
dpc.refresh();
}
private function onStartAudio(audioId:String)
{
for ( var audio:Object in dpc )
{
if (audio.audioId != audioId)
{
if (audio.status == 'playing')
{
audio.status='stopped';
}
} else {
//Alert.show("Dgsg","Error");
audio.status='playing';
}
}
gridAudios.dataProvider = dpc;
dpc.refresh();
}
public function playAudio(audioURL:String, audioId:String){
ExternalInterface.call("playAudio", audioURL, id);
}
public function pauseAudio(){
ExternalInterface.call("pauseAudio");
}
]]>
</mx:Script>
<mx:Rotate id="rotate" />
<mx:Zoom id="zoom" />
<mx:VBox top="0" bottom="0" left="0" right="0" paddingTop="20" paddingLeft="20">
<mx:Text fontWeight="bold" height="20">
<mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
</mx:Text>
</mx:VBox>
<mx:DataGrid id="gridAudios" top="50" bottom="20" left="20" right="20" width="100%" doubleClickEnabled="false">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="audioId"/>
<mx:DataGridColumn id="btnCol" headerText="" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Script>
<![CDATA[
protected function image1_clickHandler(event:MouseEvent):void
{
if (data.status=='playing'){
outerDocument.pauseAudio();
data.status='';
}else{
outerDocument.playAudio(data.url,data.audioId);
data.status='playing';
}
}
]]>
</mx:Script>
<mx:Image click="image1_clickHandler(event)"
toolTip="{data.status=='playing' ? 'Stop' : 'Play'}"
useHandCursor="true" source="{data.status=='playing' ? outerDocument.Stop : outerDocument.Play}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:TitleWindow>
Where the key to the solution is in the source property of the Image object and in the click handler.

AdvancedDataGridColumnGroup cell color

How to specify the color of the text inside a particular cell contained in AdvancedDataGridColumnGroup in Flex? The code is in action script and the text color varies according to the value that the cell contains. i.e. if it is negative value it has to be displayed in red otherwise black.
Please mention if there is any work around too!
Thanks!
I've done example with functionality that you describe. Hope, it will help.
<mx:AdvancedDataGrid id="grid"
itemRenderer="MyAdvancedDataGridItemRenderer"
dataProvider="{dataProvider}"
width="200" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="name"/>
<mx:AdvancedDataGridColumn dataField="score"/>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dataProvider:ArrayCollection = new ArrayCollection([
{name:"Name1", score:-12},
{name:"Name2", score:10},
{name:"Name3", score:-100},
]);
]]>
</mx:Script>
</mx:Application>
And class MyAdvancedDataGridItemRenderer.as:
package
{
import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
public class MyAdvancedDataGridItemRenderer extends AdvancedDataGridItemRenderer
{
public function MyAdvancedDataGridItemRenderer()
{
super();
}
override public function validateProperties():void
{
super.validateProperties();
if (listData)
{
var item:Object = AdvancedDataGridListData(listData).item;
if (AdvancedDataGridListData(listData).dataField == "score") {
setStyle("color", item.score < 0 ? 0xff0000 : 0x000000);
}
}
}
}
}

Flex 3 DataGrid Component Losing Focus

I'm running into problems getting the focus to work on my custom datagrid. It is a subclass of MDataGrid which can be found here.
My problems is, that every other mouse click on inline components actually focuses on the component. The other clicks seem to automatically lose focus to something else, and I can't seem to figure out what is going on. Any help would be greatly appreciated.
Thanks for your time.
--Charly
<?xml version="1.0" encoding="utf-8"?>
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="com.iwobanas.controls.*"
xmlns:dgc="com.iwobanas.controls.dataGridClasses.*"
dataProvider="{locator.vendorInvoices}"
editable="true">
<mx:Script>
<![CDATA[
import model.PayablesLocator;
[Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance();
]]>
</mx:Script>
<controls:columns>
<dgc:MDataGridColumn dataField="loadNumber"
headerText="Load"
editable="false"/>
<dgc:MDataGridColumn dataField="carrierName"
headerText="Carrier"
editable="false"/>
<mx:DataGridColumn headerText="Vendor Invoice #"
rendererIsEditor="true"
editorDataField="vendorInvoiceNumber">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
implements="mx.controls.listClasses.IDropInListItemRenderer, mx.managers.IFocusManagerComponent">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.FlexEvent;
private var _listData:DataGridListData;
[Bindable] public var vendorInvoiceNumber:String;
// Implements mx.managers.IFocusManagerComponent
override public function drawFocus(draw:Boolean):void {
invoiceNumberInput.setFocus();
}
// Implements mx.controls.listClasses.IDropInListItemRenderer
override public function get data():Object {
return super.data;
}
override public function set data(value:Object):void {
super.data = value;
invoiceNumberInput.text = data.vendorInvoiceNumber
}
public function get listData():BaseListData {
return _listData;
}
public function set listData(value:BaseListData):void {
_listData = DataGridListData(value);
}
private function onChange(event:Event):void {
data.vendorInvoiceNumber = invoiceNumberInput.text;
}
]]>
</mx:Script>
<mx:TextInput id="invoiceNumberInput"
width="95%"
change="onChange(event)"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Vendor Invoice Date"
rendererIsEditor="true"
editorDataField="vendorInvoiceDate">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
implements="mx.managers.IFocusManagerComponent">
<mx:Script>
<![CDATA[
import mx.events.CalendarLayoutChangeEvent;
[Bindable] public var vendorInvoiceDate:Date;
// Implements mx.managers.IFocusManagerComponent
override public function drawFocus(draw:Boolean):void {
vendorInvoiceDateInput.setFocus();
}
protected function onChange(event:CalendarLayoutChangeEvent):void {
data.vendorInvoiceDate = event.newDate;
}
]]>
</mx:Script>
<mx:DateField id="vendorInvoiceDateInput"
width="95%"
editable="true"
change="onChange(event)"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn editorDataField="isSelected"
headerText="Select"
rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">
<mx:Script>
<![CDATA[
import controller.PayablesController;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var control:PayablesController = PayablesController.getInstance();
private var _listData:DataGridListData;
[Bindable] public var isSelected:Boolean;
override public function drawFocus(draw:Boolean):void {
selectionCheckBox.setFocus();
}
override public function get data():Object {
return super.data;
}
override public function set data(value:Object):void {
super.data = value;
selectionCheckBox.selected = data.isSelected
}
public function get listData():BaseListData {
return _listData;
}
public function set listData(value:BaseListData):void {
_listData = DataGridListData(value);
}
protected function onChange(event:Event):void {
data.isSelected = selectionCheckBox.selected;
control.updateBatchSelections();
}
]]>
</mx:Script>
<mx:CheckBox id="selectionCheckBox" change="onChange(event)"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</controls:columns>

ActionScript Item Renderer in DataGrid

I am using this example from blog.flexexamples.com.
I have a datagrid and trying to dynamically add button to one of datagrid column. But I want this Button as an ItemRenderer to be written in ActionScript and not MXML.
How can I do that ?
Thanks
I think this is what you need.
ActionButtonItemRenderer.as :
package
{
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.IFlexDisplayObject;
public class ActionButtonItemRenderer extends Button implements IFlexDisplayObject, IListItemRenderer, IDropInListItemRenderer
{
public var btn:Button;
public function ActionButtonItemRenderer()
{
super();
btn = new Button();
btn.label = "Take Action";
btn.addEventListener(MouseEvent.CLICK,clickHandler);
btn.visible = btn.includeInLayout = true;
}
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);
Alert.show("Button clicked");
}
}
}
DynamicDataGridButton.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:ApplicationControlBar dock="true">
<mx:Button label="Add column" click="init();" />
</mx:ApplicationControlBar>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection
(
[
{fname:'A',lname:'B'},
{fname:'C',lname:'B'},
{fname:'D',lname:'B'}
]
);
private function addDataGridColumn(dataField:String):void {
var dgc:DataGridColumn = new DataGridColumn(dataField);
dgc.itemRenderer = new ClassFactory(ActionButtonItemRenderer);
var cols:Array = dg.columns;
cols.push(dgc);
dg.columns = cols;
}
private function init():void {
addDataGridColumn("Details");
}
]]>
</mx:Script>
<mx:DataGrid id="dg" dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn id="dgc1" dataField="fname" headerText="First Name"
width="75"/>
<mx:DataGridColumn id="dgc2" dataField="lname" headerText=" Last Name"
width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
To dynamically create a button in AS3 syntax you would do this:
var button:Button = new Button();
Then after you've created the button, you can set it's properties like this:
button.label = "Click Me!";
And lastly you would add it to one of your items as such:
var dp:Array = [{label: "Button 1", button: button},{label: "Button 2", button: button}];
myDg.dataProvider = dp;
Then you would feed it to your datagrid that is laid out like this:
<mx:DataGrid id="myDG" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="label" headerText="Labels"/>
<mx:DataGridColumn dataField="button" headerText="Buttons"/>
</mx:columns>
</mx:DataGrid>
Not sure if that would actually work though, you may have to have an button itemRenderer on the entire column like this example.

ItemRollOver with a custom ToolTip

I have this custom toolTip:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.core.IToolTip"
creationPolicy="all"
cornerRadius="4" borderStyle="solid" backgroundColor="#FFFFFF"
creationComplete="init()" width="100" height="100">
<fx:Script>
<![CDATA[
import mx.core.IToolTip;
public var arrItemsKits:Array=[];
public var _text:String;
public function get text():String {
return _text;
}
public function set text(value:String):void {
}
protected function init():void
{
grid.dataProvider=arrItemsKits;
}
]]>
</fx:Script>
<mx:DataGrid id="grid" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Code" dataField="itemPartNumber"/>
<mx:DataGridColumn headerText="Description" dataField="kitItemsNotes"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
and i want it to fire it when i roll the mouse over a row from a datagrid, so i need to add an event listener(toolTipCreate) to the row of that grid.
Any ideas how can i solve this?
Thanks
Check out this
<!-- myDataGridTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.core.IToolTip;
import mx.events.ToolTipEvent;
// holds the currently highlighted item
private var highlightedItem:Object;
// event listener to get our hands on the currently highlighted item.
private function getHighlightedItem(e:ListEvent):void {
highlightedItem = e.itemRenderer.data;
// Quick n dirty way to force the ToolTipManager to refresh our tooltip.
// We need to dispatch this by hand because the pointer never leaves myDataGrid
// between successive highlights.
myDataGrid.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
}
private function createTooltip(e:ToolTipEvent):void {
var tt:MyCustomTooltip = new MyCustomTooltip();
tt.firstName = highlightedItem.name;
tt.lastName = highlightedItem.surname;
// Contract with the tooltip manager: if it finds an IToolTip instance attached to
// the event, it uses that instance instead of creating the standard one.
e.toolTip = tt;
}
]]>
</mx:Script>
<mx:DataGrid id="myDataGrid" toolTip=" " toolTipCreate="createTooltip(event)" itemRollOver="getHighlightedItem(event)">
<mx:dataProvider>
<mx:Object name="john" surname="doe"/>
<mx:Object name="mike" surname="smith"/>
</mx:dataProvider>
</mx:DataGrid>
</mx:Application>
<!-- MyCustomTooltip.mxml -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip"
backgroundColor="yellow" backgroundAlpha="0.6">
<mx:Script>
<![CDATA[
private var _firstName:String;
private var _lastName:String;
// Dummy implementations to comply with mx.core.IToolTip
public function get text():String {return null;}
public function set text(value:String):void {}
// properties and functions
public function set firstName(value:String):void {
_firstName = value;
invalidateProperties();
}
public function set lastName(value:String):void {
_lastName = value;
invalidateProperties();
}
override protected function commitProperties():void {
fName.text = _firstName;
lName.text = _lastName;
}
]]>
</mx:Script>
<mx:Label x="0" y="0" id="fName"/>
<mx:Label x="0" y="20" id="lName"/>
</mx:Canvas>
.
.
Or try something like this
.
.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="doInit();">
<mx:Script>
<!![CDATA[import mx.collections.ArrayCollection; // this holds the grid data
[Bindable]
private var myData:ArrayCollection = new ArrayCollection();private function doInit():void{
myData.addItem({fname:"Joe",lname:"Bloggs"});
myData.addItem({fname:"Joe1",lname:"Bloggs"});
}
private function buildToolTip(item:Object):String{
var myString:String = "";
if(item != null)
{
myString = myString + "Firstname : " + item.fname + "\n";
myString = myString + "Lastname : " + item.lname + "\n"
}
return myString;
}
]]>
</mx:Script>
<mx:DataGrid id="dGrid" dataProvider="{myData}" visible="true" dataTipFunction="buildToolTip">
<mx:columns>
<mx:DataGridColumn dataField="fname" headerText="FirstName" showDataTips="true" />
<mx:DataGridColumn dataField="lname" headerText="LastName" showDataTips="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
I figured it out: On itemRollOver handler you add event.itemRenderer.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, createTT);