Two-line itemeditor for whole row in single-line s:Datagrid?

Question

I have some DataGrids with pretty standard one-line itemrenderers, but need to use a custom two-line itemeditor for the whole row. I want to/must do this because I cannot edit each cell individually, but need to edit the whole object before I can save it.

I've run into two big problems so far:

1. How to place/display the itemeditor so that it actually works for the whole row?
2. How to force the DataGrid to change the rowheight on the edited entry so that the two-line itemeditor doesn't bleed into the row below?

---

Basically, what I want is this:

---

MyDataGrid:

<s:DataGrid id="myDataGrid" height="100%" width="100%" sortableColumns="false" editable="true" variableRowHeight="true">
    <s:columns>
        <s:ArrayCollection>
            <s:GridColumn dataField="foo" itemEditor="myItemEditor"/>

            <s:GridColumn dataField="bar" itemEditor="myItemEditor"/>

            <s:GridColumn width="24" itemRenderer="myItemRenderer"/>
        </s:ArrayCollection>
    </s:columns>
</s:DataGrid>

MyItemEditor:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            override public function prepare():void {
                itemLongname.text = this.data["longName"];
                itemShortname.text = this.data["shortName"];
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:TextInput id="itemLongname"/>

        <s:TextInput id="itemShortname"/>
    </s:Group>

    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:Rect width="100%"/>

        <s:Button id="itemSaveButton" label="Save"/>

        <s:Button id="itemCancelButton" label="Cancel"/>
    </s:Group>
</s:GridItemEditor>

Answer 1

I think this helps you :)

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf2.html#WS2db454920e96a9e51e63e3d11c0bf65e9f-7fd4