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.)

This movie requires Flash Player 9

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:

<?xml version="1.0" encoding="utf-8"?>
<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:

<mx:DateField xmlns:mx="http://www.adobe.com/2006/mxml"
     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>
 
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



14 Comments »