Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Issues with inlined textEditor (TextArea) in AdvancedDataGridColumn

    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>
    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 attachment). 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 attachment). The bar is not resizing along with the column width.

    Your help is much appreciated. Thank you!
    Bonnie
    Attached Thumbnails Attached Thumbnails Issues with inlined textEditor (TextArea) in AdvancedDataGridColumn-textarea_scrollbar_initial_partially_hidden.jpg   Issues with inlined textEditor (TextArea) in AdvancedDataGridColumn-textarea_scrollbar_not_resizing_with_column_width.jpg  


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •