datefield itemrenderer - actionscript-3

Question

I try to create an editable datefield itemrenderer.
This itemrenderer works fine if I click on calendar button. But if I put data with keyboard, data isn't updating, if field is focus out data become empty.
See below my code
Datagrid column is like that
<mx:DataGridColumn dataField="echDate"
headerText="Date" headerStyleName="dgHeader"
itemEditor="ui.itemRenderer.irDateD" editorDataField="dateModif"/>
and item editor is
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.CalendarLayoutChangeEvent;
import mx.events.FlexEvent;
[Bindable] public var dateModif:String;
override public function set data(value:Object):void{
if(listData){
var newDate:Date;
var value1 = value.echDate;
if (value1 is String){
newDate = new DateUtility().dateStringToObject2(value1);
super.data = newDate;
dfDG.selectedDate = newDate;
dfDG.text = value1;
}
else if (value1 is Date){
super.data = value as Date;
dfDG.selectedDate = value1 as Date;
dfDG.text = new DateUtility().DateAsToString(value1);
}
}
}
protected function dfDG_changeHandler(event:CalendarLayoutChangeEvent):void
{
dateModif=dfDG.text;
}
]]>
</fx:Script>
<mx:DateField id="dfDG"
editable="true"
formatString="DD/MM/YYYY"
yearNavigationEnabled="true"
width="95"
change="dfDG_changeHandler(event)"
>
</mx:DateField>
</s:MXDataGridItemRenderer>
I'll happy if someone could help me to solve that

Answer 1

You can try this solution.
I have inserted the second DG to let you see, if data is updated or not.
I don't have your DateUtility().dateStringToObject2(value1), that's why I use a Validator instead.
The "backward connection" between Renderer and App is implemented by means of Binding.
When you use your DateUtility() to correct the input you can insert result to the text property of the DateField.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:Model id="cells">
<dataset>
<data>
<name>a</name>
<echDate>14/01/2013</echDate>
</data>
<data>
<name>b</name>
<echDate>15/01/2013</echDate>
</data>
</dataset>
</fx:Model>
</fx:Declarations>
<s:VGroup>
<mx:DataGrid
width="386" height="100" dataProvider="{cells.data}"
alternatingItemColors="[0xffffff]"
horizontalGridLineColor="0x999999"
horizontalGridLines="true"
verticalGridLineColor="0x999999"
sortableColumns="false"
resizableColumns="false" selectable="false">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="echDate" headerText="Date"
itemRenderer="com.dgdatefield.irDateD"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid
width="386" height="100"
dataProvider="{cells.data}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="echDate" headerText="Date"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
//Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<fx:Declarations>
<mx:DateValidator
id="dateValidator"
source="{dfDG}"
property="text"
inputFormat="DD/MM/YYYY"
wrongLengthError="The date format is not correct"
allowedFormatChars="/ - ."/>
</fx:Declarations>
<fx:Binding source="dfDG.text" destination="data.echDate"/>
<s:HGroup width="100%" horizontalAlign="center">
<mx:DateField
id="dfDG" text="{data.echDate}"
editable="true"
formatString="DD/MM/YYYY"
yearNavigationEnabled="true"
width="120"/>
</s:HGroup>
</s:MXDataGridItemRenderer>
I hope it can help you