[Flash][AS3] TextArea in Datagrid

On this adobe page http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f4a.html

you can find out how to make a datagrid cell to a muliline cell. Pretty cool huh? But not so cool if you want to edit the cell, because right after you click on it, it changes to a nasty line (looks ugly if you have a big paragraph), and of course, you cannot do breaks. So why? Because it's a textfield!!!!

I haven't done much Flash work lately, I was in the Jsp mode and suddenly I have to switch back to flash.

I spend hours to figure this out, and finally there's a click. Oh yes, a listener to listen to the input changes is a MUST. Otherwise your textarea looks like being locked or in another word not editable.

Also, do not attempt to extend a movieclip and create a related symbol in your movie with a textarea in it. Oh yes you will see the thing but it's floating around, you don't want to spend more time to place it in a proper place, especially the textarea is in a datagrid.

I am not going to do more explanation, since it's been explained in the other post of how to add a checkbox in the datagrid. But here is the code, hope you find it's useful.

Just a little note: _data["Advantage"] gives you the cell value of the Advantage column (in my case).

package your.package.namel {

import fl.controls.TextArea;

import fl.controls.listClasses.ListData;

import fl.controls.listClasses.ICellRenderer;

import flash.events.Event;

public class MultilineCellAdvantage extends TextArea implements ICellRenderer {

private var _listData:ListData;

private var _data:Object;

private var _state:String;

private var _selected:Boolean;

public function MultilineCellAdvantage() {

super();

addEventListener(Event.CHANGE, onChangeHandler , false, 0, true);

}

public function set data(d:Object):void{

_data = d;

text = _data["Advantage"];

}

public function get data():Object{

return _data;

}

public function get listData():ListData{

return _listData;

}

public function set listData(value:ListData):void {

_listData = value;

}

public function get selected():Boolean {

return _selected;

}

public function set selected(value:Boolean):void {

_selected = value;

}

public function setMouseState(state:String):void {

_state = state;

}

private function onChangeHandler(event:Event):void{

text = event.target.text;

_data["Advantage"] = text;

}

override protected function drawBackground():void {

if (_listData.index % 2 == 0) {

setStyle("upSkin", datagrid_cell_lightBlue);

} else {

setStyle("upSkin", datagrid_cell_white);

}

super.drawBackground();

}

}

}