1 Reply Latest reply on Mar 17, 2011 10:17 AM by Flex harUI

    Issues with inlined textEditor (TextArea) in AdvancedDataGridColumn




      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):
      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>
              <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 )"/>
          <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:AdvancedDataGridColumn id="destinationTag" headerText="Caller Intent" dataField="callerIntent"/>
                  <mx:AdvancedDataGridColumn id="semanticTags" headerText="Labels" dataField="labels" editable="false">
                              <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" top="0" bottom="0" right="0" left="0">
                                          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;
                                  <!-- 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:AdvancedDataGridColumn id="strategy" headerText="Strategy" dataField="strategy">
      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.


      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.


      TextArea_scrollbar_initial_partially_hidden.JPG TextArea_scrollbar_not_resizing_with_column_width.JPG


      Your help is much appreciated. Thank you!