Access DataField in Itemrenderer when submitting to Database

Question

Hello,
I'm really stuck on this one. I have setup an Itemrenderer in a Datagrid which manages a DateField. Users can enter a date and other values directly in the datagrid. When they click 'submit', I want to populate a row in a database and I have setup a service for this. A row is created in the db as expected however the date is not populated despite users having entered a value. Below is a code snippet:
Datagrid
<s:GridColumn dataField="datf" headerText="Period From" rendererIsEditable="true">
     <s:itemRenderer>
          <fx:Component>
               <s:GridItemRenderer dataChange="updateRenderer()">
                    <fx:Script>
                         <![CDATA[
                                   public function updateRenderer():void {
                                        periodFrom.text = outerDocument.dtf1.format(data.datf);
                                   private function dateField_labelFunc(item:Date):String {
                                        periodFrom.text = outerDocument.dtf1.format(item);
                                        return outerDocument.dtf1.format(item);
                         ]]>
                    </fx:Script>
                         <mx:DateField horizontalCenter="0" verticalCenter="0" width="90%" id="periodFrom" labelFunction="dateField_labelFunc"/>
               </s:GridItemRenderer>
          </fx:Component>
</s:itemRenderer>
</s:GridColumn>
Handler
protected function createBillResult_resultHandler(event:ResultEvent):void
                                        var dataProvider = itemsDg.dataProvider;
                                        var item = null;
                                        for (var i:int = 0; i < dataProvider.length; i++){
                                                  item = dataProvider.getItemAt(i);
                                                  trace(item.datf); <--- THIS IS 'UNDEFINED'
                                                  billItems.days = item.days;
                                                  billItems.ratu = item.ratu;
                                                  billItems.lnid = item.lnid;
                                                  trace(billItems.datf = dtf2.format(item.datf));
                                                  createBillItemsResult.token = billingService.createBillItems(billItems);
I would have thought that I can access the value from the itemrenderer using the dataField property like I do with the other items.
Please, please, please help.
Brian

Answer 1

This error "TypeError: Error #1009: Cannot access a property or method of a null object reference" usually show when you are trying to set something that doesn't exist at the time of calling.
I create a test code and it works for me. Try to replicate you issue here:
<?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>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            // Data includes URL to album cover.
            [Bindable]                       
            private var initDG:ArrayCollection = new ArrayCollection([
                { Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, datf:'01/01/2012'},
                { Artist:'Pavement', Album:'Brighten the Corners',     Price:11.99, datf:'01/01/2012'}
            private function addEmptyRow():void{
                myGrid.dataProvider.addItem({
                    'Artist':'',
                    'Album':'',
                    'Price':0,
                    'datf':''
            private function showData():void{
                Alert.show('Done');
        ]]>
    </fx:Script>
    <s:VGroup>
    <s:DataGrid id="myGrid" dataProvider="{initDG}" width="100%" variableRowHeight="true" editable="true">  
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="Artist"/>
                <s:GridColumn dataField="Album"/>
                <s:GridColumn dataField="Price"/>
                <s:GridColumn dataField="datf" headerText="Period From" rendererIsEditable="true">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        public function updateData():void {
                                            data.datf = periodFrom.selectedDate;
                                    ]]>
                                </fx:Script>
                                <mx:DateField horizontalCenter="0" verticalCenter="0" width="90%" id="periodFrom" formatString="MM/DD/YYYY" text="{data.datf}" change="updateData()" />
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
    <s:Button label="Add Row" click="addEmptyRow()" />
    <s:Button label="submit" click="showData()" />
    </s:VGroup>
</s:Application>