April 8th, 2008 by Kyle
Tags: datagrid, DateField, Flex, itemeditor
Posted in: Flex
The flex docs show how to use a DateField component as a Datagrid itemEditor. But what if your date data is actually a string instead of a date object? The sample below shows how to code a custom itemEditor extending the DateField component that allows you to do this. (I have also show how to use the drop in DateField as an editor for Dates.)
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Here is the app code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
import mx.controls.DateField;
import mx.core.ClassFactory;
import mx.controls.dataGridClasses.DataGridListData;
[Bindable]
public var ac:ArrayCollection = new ArrayCollection(
[{dateString:"11/12/2006", contact:"ABD DEF", dt: new Date(2003,10,23)},
{dateString:"11/12/2007", contact:"GHI", dt:new Date(2004,11,2)},
{dateString:"10/10/2007", contact:"JKL MNOP", dt:new Date(2007,4,14)},
{dateString:"09/12/2007", contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)}]);
]]>
</mx:Script>
<mx:DataGrid editable="true" height="95%" width="95%" id="dg" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="DateString" dataField="dateString" width="120"
itemEditor="DateEditor"
editorDataField="text" />
<mx:DataGridColumn headerText="Date" dataField="dt" width="120"
itemRenderer="mx.controls.DateField"
rendererIsEditor="true"
editorDataField="selectedDate"/>
<mx:DataGridColumn headerText="Contact" dataField="contact" width="80"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Here is the code for the itemEditor:
implements="mx.controls.listClasses.IListItemRenderer"
focusIn="open()">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
if(listData){
var newDate:Date;
if (value is String){
newDate = new Date(Date.parse(data as String));
super.data=newDate;
}
else if (value is Date){
super.data=value as Date;
}
}
}
]]>
</mx:Script>
</mx:DateField>
July 17th, 2008 at 8:22 am
Thanks for the info. You are teh awesome!!!1!1!!!
September 5th, 2008 at 4:54 pm
for the most part this is super clean and nice. one thing i am noticing is that the date picker is defaulting to today’s date rather than the date of the string being provided. this also causes the original date value to get lost if the user doesn’t make a new selection.
September 15th, 2008 at 7:01 am
Hi,
Thanks for the post. To make the DateField show and select the correct date (from the dataProvider), just add this:
super.text = value;
I also added showToday=”false” into the extended DateField component.
I believe this line:
newDate = new Date(Date.parse(data as String));
is meant to be:
newDate = new Date(Date.parse(value as String));
Cheers,
Stephen.