User “Fred” asked a question the other day about using the TextArea as an item editor in an editable, variable line height DataGrid control.
The following example shows how you can use the Flex TextArea control as a drop-in item editor to allow you to easily edit the items in a DataGrid control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="itemsXML" source="data/items.xml" />
<mx:DataGrid id="dataGrid"
dataProvider="{itemsXML.item}"
variableRowHeight="true"
editable="true"
width="100%"
height="100%">
<mx:columns>
<mx:DataGridColumn id="idColumn"
dataField="@id"
editable="false"
headerText="ID" />
<mx:DataGridColumn id="descColumnTextInput"
dataField="@desc"
editable="true"
wordWrap="true"
headerText="Desc (TextInput)" />
<mx:DataGridColumn id="descColumnTextArea"
dataField="@desc"
editable="true"
wordWrap="true"
itemEditor="mx.controls.TextArea"
editorUsesEnterKey="true"
headerText="Desc (TextArea)" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
items.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ -->
<items>
<item id="1" desc="The quick brown fox jumped over the lazy dog." />
<item id="2" desc="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
<item id="3" desc="Pellentesque nonummy aliquet metus." />
<item id="4" desc="Nullam enim." />
<item id="5" desc="Nullam sollicitudin sodales diam." />
<item id="6" desc="Praesent quis tellus vel erat tristique placerat." />
<item id="7" desc="Sed egestas, enim a convallis auctor, nisl tellus tincidunt nibh, vitae tempus mauris risus at arcu." />
<item id="8" desc="Suspendisse laoreet sem eget ipsum porta consequat." />
<item id="9" desc="Ut imperdiet felis quis orci." />
<item id="10" desc="Phasellus tempus ante eu nisl." />
<item id="11" desc="Donec velit sem, rutrum ac, bibendum sed, mattis ac, odio." />
<item id="12" desc="Fusce mauris turpis, vehicula nec, mattis et, dapibus quis, arcu." />
<item id="13" desc="Morbi tincidunt volutpat justo." />
<item id="14" desc="Nam urna." />
<item id="15" desc="Mauris est dui, aliquet at, venenatis tempus, eleifend a, pede." />
<item id="16" desc="Vestibulum porttitor arcu sit amet nulla." />
<item id="17" desc="Nulla vitae sapien." />
</items>
View source is enabled in the following example.
Who would have thought it would be so easy? :)
I actually like the effect the TextArea has of not selecting all the text and putting focus at the end of the line. So I’d consider using the TextArea even for a single line of text.
FlexExamples.com, now with Spam Karma!
Peter,
I was interested in your example but the thing I can’t seem to figure out is how to control where the newlines go in a the textarea. I have a list of items within the cell of a row that I want to display.
Jana
Jana,
Maybe try using the <br> tag, or “\n”.
Peter
This is nice, thanks for the example. But the interesting part would be to save the new entered/edited data into a database. How can this be done?
javlae,
You would need to call a server-side script (ColdFusion, PHP, Java, ASP, whatever) that communicates with the database. So basically whenever you want to update the database with the new values, you would serialize and data from Flex to your server script which would loop over each item and update the database using some simple SQL.
Hope that helps,
Peter
Do you know how I can allow the user to enter a new line in the text value?
Bill Shirley,
In the TextArea item editor, they should be able to hit the Enter key to add a newline.
In the items.xml file, you can enter newlines by adding \n to the strings.
Peter