Issues with inlined textEditor (TextArea) in AdvancedDataGridColumn

Question

Hello,
I have an AdvancedDataGrid with three columns, populated by a dataProvider ArrayCollection (called mappedTagsArray) with the fields callerIntent, labels, and strategy. The labels column needs to display one or more lines. Currently, the data for this column is a String with the multiple values separated by the "\n" character.
Here are the relevant pieces of the code (I did not include the function definitions b/c they are not relevant to the issues):
[CODE][Bindable]
public var mappedTagsArray:ArrayCollection = new ArrayCollection( [
    { callerIntent: "cancel-vague", labels: "cancel-vague", strategy: "Menu" },
    { callerIntent: "complain-bill_amount", labels: "complain-bill\ncomplain-bill_amount", strategy: "YesNo" },
    { callerIntent: "enquire-postpaid", labels: "enquire-postpaid\nvague-postpaid", strategy: "AskAgain" },
    { callerIntent: "enquire-sms", labels: "enquire-sms", strategy: "Direct" },
    { callerIntent: "garbage-garbage", labels: "garbage-flirt\ngarbage-garbage\ngarbage-noise\ngarbage-profanity", strategy: "Fallback" },
    { callerIntent: "report-sim", labels: "enquire-sim\nreport-sim", strategy: "Direct" }
<s:Group id="mappedTagsData" height="100%" width="35%">
    <s:Group top="0" width="100%" height="30">
        <s:Rect width="100%" height="100%">
            <s:fill><s:SolidColor color="0xDCDCDC" /></s:fill>
        </s:Rect>
        <mx:Button id="addDestinationTag" left="5" verticalCenter="0" width="36" icon="@Embed(source='/assets/images/misc/PlusSignGreen_small.gif')" toolTip="Create new destination" click="btnAddDestinationTag_clickHandler( event )"/>
    </s:Group>
    <mx:AdvancedDataGrid id="mappedTagsGrid" height="100%" width="100%" top="30" editable="true" wordWrap="true" designViewDataType="flat" dataProvider="{mappedTagsArray}" itemClick="mappedTagsGrid_itemClickHandler( event )"  doubleClickEnabled="true" itemDoubleClick="mappedTagsGrid_itemDoubleClickHandler( event )">
        <mx:columns>
            <mx:AdvancedDataGridColumn id="destinationTag" headerText="Caller Intent" dataField="callerIntent"/>
            <mx:AdvancedDataGridColumn id="semanticTags" headerText="Labels" dataField="labels" editable="false">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" top="0" bottom="0" right="0" left="0">
                            <fx:Script>
                                <![CDATA[
                                    public function get value() : String
                                        return ta_labels.text;
                                    override public function set data(value:Object):void
                                        super.data = value; ta_labels.text = value.labels;
                                ]]>
                            </fx:Script>
                            <!-- BUG: Scroll bar is fixed in one location; does not move with resizing of cell -->
                            <s:TextArea id="ta_labels" heightInLines="2" editable="false" borderVisible="false" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" contentBackgroundAlpha="0" top="0" bottom="0" right="0" left="0"/>
                        </mx:HBox>                                     
                    </fx:Component>
                </mx:itemRenderer>
            </mx:AdvancedDataGridColumn>
            <mx:AdvancedDataGridColumn id="strategy" headerText="Strategy" dataField="strategy">
                <mx:itemEditor>
                    <fx:Component>
                        <mx:ComboBox>
                            <mx:dataProvider>
                                <s:ArrayList>
                                    <fx:String>AskAgain</fx:String>
                                        <fx:String>Direct</fx:String>
                                        <fx:String>Fallback</fx:String>
                                        <fx:String>Menu</fx:String>
                                        <fx:String>YesNo</fx:String>
                                </s:ArrayList>
                            </mx:dataProvider>
                        </mx:ComboBox>
                    </fx:Component>
                </mx:itemEditor>
            </mx:AdvancedDataGridColumn>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Group>[/CODE]
FIRST ISSUE
Since the labels column can display multiple lines, I want the row height to vary to accommodate the number of lines per row. I tried setting variableRowHeight="true" for the AdvancedDataGrid and not setting any height for the HBox or TextArea. However, in this case, the TextArea's default size of 188 pixels wide by 149 pixels high is used, even if the space is not required (as for only one line). Hence I was forced to set the TextArea's heightInLines="2". This activates the scroll bar if necessary.
SECOND ISSUE
This issue is with the vertical scroll bar. Even though I defined top="0", bottom="0", right="0", left="0" for both the HBox and TextArea, the scroll bar remains in a fixed position. Initially, it is partially hidden (first screenshot). If I reduce the column width (to the left of the scroll bar), the scroll bar no longer appears. If I expand the column width (to the right of the scroll bar), space starts appearing to the right of the scroll bar (second screenshot). The bar is not resizing along with the column width.
Your help is much appreciated. Thank you!
Bonnie

Answer 1

You might need a custom TextArea Skin with different minWidth/Height and
maybe take out the Scroller if you don't want it.