DataGrid with TextArea in itemRenderer using drag and drop

Question

I have a DataGrid and in one of the columns I am using an itemRenderer, in this itemRenderer I have a spark textArea, with this textArea I am have scrolling enabled.  Also with this dataGrid I have drag enabled (for drag/drop). 
I am seeing two problems if anyone has any suggestions:
1. When you try to scroll the textArea, dragging kicks in, so you get partial scrolling then dragging.
2. Using the up/down symbols of the scroller, the scrollbar moves but the text in the dataGrid cell does not.
Thanks,
John
This is the itemRenderer:
?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/halo"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
private var _listData:BaseListData;
[Bindable]
private var thisTextFlow:TextFlow;
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = value;
override public function set data(value:Object):void
if (value != null)
super.data = value;
thisTextFlow = TextConverter.importToFlow(data[(listData as DataGridListData).dataField], TextConverter.TEXT_FIELD_HTML_FORMAT);
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
]]>
</fx:Script>
<s:TextArea id="textArea" textFlow="{thisTextFlow}"
editable="false" borderVisible="false"
width="100%"
contentBackgroundAlpha="0"
heightInLines="4"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto"/>
</mx:VBox>

Answer 1

Below is code that is working and is re-usable, and if a textArea has a visible scrollbar than when that scrollbar has mouse down/up it sets the dataGrid to dragEnable = false/true to take care of the problem with the textArea dragging and scrolling at the same time.
One minor thought/issue is:
1. The size of this renderer using both a VBox and a textArea - but I wanted a scrollable text area that handles textflow.
<?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/halo"
implements="mx.controls.listClasses.IDropInListItemRenderer"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.events.FlexEvent;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
private var dg:DataGrid;
private var _listData:BaseListData;
[Bindable]
private var thisTextFlow:TextFlow;
private function init():void
dg = DataGrid(_listData.owner);
textArea.scroller.verticalScrollBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);
textArea.scroller.horizontalScrollBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown_handler);
private function mouseDown_handler(event:MouseEvent):void
dg.dragEnabled = false;
textArea.scroller.verticalScrollBar.addEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);
textArea.scroller.horizontalScrollBar.addEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);
private function mouseUp_handler(event:MouseEvent):void
dg.dragEnabled = true;
textArea.scroller.verticalScrollBar.removeEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);
textArea.scroller.horizontalScrollBar.removeEventListener(MouseEvent.MOUSE_UP, mouseUp_handler);
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = value;
override public function set data(value:Object):void
if (value != null)
super.data = value;
thisTextFlow = TextConverter.importToFlow(data[(listData as DataGridListData).dataField], TextConverter.TEXT_FIELD_HTML_FORMAT);
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
]]>
</fx:Script>
<s:TextArea id="textArea" textFlow="{thisTextFlow}"
editable="false" borderVisible="false"
width="100%"
contentBackgroundAlpha="0"
heightInLines="4"/>
</mx:VBox>