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.
{ 14 comments… read them below or add one }
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 which event to listen to when saving the data? The itemEditEnd event seems to be called too soon, I can’t find the updated data.
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
Why is your textinput selection color Black and not the standard Blue? Am I missing something here, is there a way to set that color or it is a browser thing? Sorry for the obscure question, thx.
how do we connect an combo box with an image box and how to change an image in image box by selecting the content of combo box…../????????
deepti,
Something like this:
Peter
Hi, I’ve tried every kind of custom renderer and editor and data setter I can think of, to no avail:
Given multi-line data in a datagrid cell, I’d like the datagrid to just show the first line of text (this part is easy if you make the renderer a Label; it even truncates with ellipses for you), but when the user clicks on the text to edit, I want the datagrid row height to expand to show all the text lines. When the user stops editing, I’d like it to collapse back together.
One issue seems to be that measure() is not called by the grid unless the source data for the cell has changed.
Thanks for any help
measure() is invoked when u call invalidateSize()
http://codeofdoom.com/wordpress/2009/02/19/override-core-uicomponent-methods/