This is a follow on to my previous blog entry:
http://blog.739saintlouis.com/2007/11/22/flex-linebreaks-in-the-datagrid/

Here I show how to deal with line breaks in itemRenderer and itemEditors instead of in a datagrid labelFunction.
(This is also a nice example of writing simple, separate itemRenderer and itemEditors.)

Here is the application code:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <mx:array id="arr2">
        <mx:object articlename="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15">
        <mx:object articlename="Setting an icon in an Alert control" data="14">
        <mx:object articlename="Setting an icon in a Button control" data="13">
        <mx:object articlename="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10">
        <mx:object articlename="Detecting which button a user pressed to dismiss an Alert dialog" data="9">
        <mx:object articlename="Using the Alert control\nFormatting data tips in a Slide\n" data="8">
        <mx:object articlename="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15">
        <mx:object articlename="Setting an icon in an Alert control" data="14">
        <mx:object articlename="Setting an icon in a Button control" data="13">
        <mx:object articlename="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10">
        <mx:object articlename="Detecting which button a user pressed to dismiss an Alert dialog" data="9">
        <mx:object articlename="Using the Alert control\nFormatting data tips in a Slide\n" data="8">
        <mx:object articlename="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15">
        <mx:object articlename="Setting an icon in an Alert control" data="14">
        <mx:object articlename="Setting an icon in a Button control" data="13">
        <mx:object articlename="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10">
        <mx:object articlename="Detecting which button a user pressed to dismiss an Alert dialog" data="9">
        <mx:object articlename="Using the Alert control\nFormatting data tips in a Slide\n" data="8">
    </mx:object>
    <mx:arraycollection id="arrColl2" source="{arr2}">    

    <mx:datagrid height="250" dataprovider="{arrColl2}" variablerowheight="true" width="60%" editable="true">
        <mx:columns>
            <mx:datagridcolumn>
                headerText="Name of the article in question"
                itemRenderer="MyRenderer" dataField="articleName"
                itemEditor="MyEditor" editable="true"
                editorUsesEnterKey="true" />
            <mx:datagridcolumn datafield="data" headertext="ID of the article" editable="false">
        </mx:datagridcolumn>
    </mx:datagridcolumn>
</mx:columns>
</mx:datagrid></mx:arraycollection></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:array></mx:application>

Here is the itemRenderer based on Text:

<mx:text xmlns:mx="http://www.adobe.com/2006/mxml" text="{txt}">
    implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:script>
    <!–[CDATA[
        import mx.controls.listClasses.ListData;
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        private var _listData:DataGridListData;            

        [Bindable]–>       public var txt:String;

        override public function set data(value:Object):void {
            super.data = value;
            var str:String = data[_listData.dataField];
            var myPattern:RegExp = /\\n/g;
            var newStr:String=str.replace(myPattern, "\n");
            txt = newStr;
        }

        override public function get data():Object {
            return super.data;
        }            

        override public function get listData():BaseListData
        {
            return _listData;
        }

        override public function set listData(value:BaseListData):void
        {
            _listData = DataGridListData(value);
        }   

    ]]>
    </mx:script>
</mx:text>

Here is the itemEditor based on TextArea:

<mx:textarea xmlns:mx="http://www.adobe.com/2006/mxml" text="{txt}">
    implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:script>
    <!–[CDATA[
        import mx.controls.listClasses.ListData;
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        private var _listData:DataGridListData;            

        [Bindable]–>       public var txt:String;

        override public function set data(value:Object):void {
            super.data = value;
            var str:String = data[_listData.dataField];
            var myPattern:RegExp = /\\n/g;
            var newStr:String=str.replace(myPattern, "\n");
            txt = newStr;
        }

        override public function get data():Object {
            return super.data;
        }            

        override public function get listData():BaseListData
        {
            return _listData;
        }

        override public function set listData(value:BaseListData):void
        {
            _listData = DataGridListData(value);
        }   

    ]]>
    </mx:script>
</mx:textarea>

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9