Thursday, January 21, 2010

ItemEditEnd broken for a dateField column

Here is a test case where the itemEditEnd does not fire even though everything seems to be hooked up.  This caused me some pain, until I took a look at the DataGrid.as source code and stepped through it in the debugger.  Even though rendererIsEditor="true",  in red below you still need to set itemEditor="mx.controls.DateField".   Why I needed this event is another story.   Hope that someone finds this useful.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="horizontal"
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.events.DataGridEvent;
            import mx.collections.ArrayCollection;
            [Bindable] private var _data:ArrayCollection = new ArrayCollection([{id: "0", name: "zero"}, {id: "1", name: "one"}, {id: "2", name: "two"}, {id: "3", name: "three"}]);

            private function onItemEditEnd(event:DataGridEvent):void {
                trace("onItemEdit");
            }
        ]]>
    </mx:Script>
    <mx:DataGrid alternatingItemColors="[#F7F7F7, #E9E9E9]"
        borderColor="#DFD9D9"
        borderStyle="solid"
        dataProvider="{_data}"
        editable="true"
        height="100%"
        id="dgProducts"
        itemEditEnd="onItemEditEnd(event)"
        sortableColumns="false"
        themeColor="#67B5E6"
        variableRowHeight="true"
        width="100%"
        wordWrap="true">
        <mx:columns>
            <mx:DataGridColumn dataField="name"
                editable="false"
                headerText="Product"
                width="60"/>
            <mx:DataGridColumn dataField="none"
                editable="true"
                headerText="License Key"
                width="60">
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="license_expiration_date"
                editorDataField="selectedDate"
                headerText="Expiration Date"
                itemRenderer="mx.controls.DateField"
                rendererIsEditor="true"
                width="60">
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

1 comment:

Jia said...

Thanks, man, a lot!!! I've wasted a lot of time with this editable dates in a grid .. aggrrhh. You saved me! :)