Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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/
Is there a way to have the scrollbar calculate the height correctly? Currently if one row has a lot of content (try filling out one row above with a lot of content…), the scrollbar will resize to what is visible. Then if you scroll past the content the scrollbar height jumps wildly in size. Basically it bounces in height as you scroll, making this ineffective to use.
Hi Everyone,
Is there any way that I can prevent the edited text to be stored in the list. For example, I allow editing on a list of employee names. If some one edits an item to a name that is already on the list, the entry should be simply discarded. The original name should keep there and an alert shown to the user that the name already exists. I tried itemEditBegin event but by then, the data has been changed.
Any help in this regards would be greatly appreciated.
Thanks
hey all
is there a way to adjust the row height dynamically while typing to accommodate all the text and not just at the end of the edit?
thanx,
Saar
Hi,
This is an example of a datagrid’s column with an TextArea as the itemEditor, which accomodates its size while typing:
<mx:DataGridColumn headerText=”MyHeader”
dataField=”myfield” wordWrap=”true”
editorUsesEnterKey=”true” >
<mx:itemEditor>
<mx:Component>
<mx:TextArea wordWrap=”true”
preinitialize=”preinitializeHandler(event)”>
<mx:Script>
<![CDATA[
private function preinitializeHandler(event : Event) : void
{
addEventListener(Event.CHANGE, function() : void
{
setActualSize(width, textHeight + 10);
});
}
]]>
</mx:Script>
</mx:TextArea>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
Regards,
Robert
Hi,
I’m trying to have a multiline component in my DataGrid, where I define the break with \n ou in my source, xml file.
I’ve try both \n and without succes.
I’ve try this but this is not working :
<mx:DataGridColumn headerText=”{xmlLoaded.outils.columns.SI.name}”
dataField=”SI”
visible=”{xmlLoaded.outils.columns.SI.visible}”
>
<mx:itemRenderer>
<fx:Component>
<s:MXDataGridItemRenderer>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import flashx.textLayout.elements.TextFlow;
import spark.utils.TextFlowUtil;
private function textFlow(s:String):TextFlow
{
return TextFlowUtil.importFromString(s) ;
}
]]>
</fx:Script>
<s:TextArea id=”monTextArea” textFlow=”convert({data.SI})” />
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Do you have any other idea ?
Best regards,