Creating an editable DataGrid control in Flex

The following example shows how you can create an editable Flex DataGrid control by setting the editable property on the DataGrid and DataGridColumn objects.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/11/creating-an-editable-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

When working with editable DataGrid controls, there are three events which can be useful: itemEditBeginning, itemEditBegin, and itemEditEnd.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/11/creating-an-editable-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DataGridEvent;

            private function addEvent(evt:DataGridEvent):void {
                eventsArrColl.addItem(evt);
            }

            private function clearEvents():void {
                eventsArrColl = new ArrayCollection();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ArrayCollection id="eventsArrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Clear DataGrid" click="clearEvents();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8"
            itemEditBegin="addEvent(event);"
            itemEditBeginning="addEvent(event);"
            itemEditEnd="addEvent(event);"
            itemFocusIn="//addEvent(event);"
            itemFocusOut="//addEvent(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true" />
        </mx:columns>
    </mx:DataGrid>

    <mx:DataGrid id="eventsDataGrid"
            dataProvider="{eventsArrColl}"
            itemRenderer="mx.controls.Label"
            verticalScrollPolicy="on"
            rowCount="9"
            width="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="columnIndex" />
            <mx:DataGridColumn dataField="dataField" />
            <mx:DataGridColumn dataField="itemRenderer" />
            <mx:DataGridColumn dataField="reason" />
            <mx:DataGridColumn dataField="rowIndex" />
            <mx:DataGridColumn dataField="type" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.