2 Replies Latest reply on Jun 23, 2008 7:21 AM by

    Datagrid showing phantom data

      I need help with displaying date strings in Data Grid column, which is to be editable.

      I am trying to create datagrid with a date field in one of the column. This date column needs to be editable. Data provider for this data grid is an array of 10 rows. Each row has 1 column which has a date string. When the datagrid is scrolled up or down, I see dates values in some rows which are supposed to be empty.

      I have attached the code that I used. (Most of it from internet).

      Attached code contains code from 2 files;

      1. Samples2.mxml
      2. EnhancedDateField.as

      Please help.

      Samples2.mxml
      -----------------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
      <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;
      import mx.events.DataGridEvent;
      import mx.collections.XMLListCollection;
      import mx.controls.Alert;
      import mx.controls.DateField;

      private function itemEditEnd(event:DataGridEvent):void
      {
      label1.text = DateField(event.currentTarget.itemEditorInstance).text;
      }

      [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:"", contact:"JKL MNOP", dt:new Date(2007,4,14)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)},
      {dateString:null, contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)}
      ]
      );
      ]]>
      </mx:Script>
      <mx:Label id="label1"/>
      <mx:DataGrid itemEditEnd="itemEditEnd(event)" editable="true" height="396" width="95%" id="dg" dataProvider="{ac}" variableRowHeight="true">
      <mx:columns>
      <mx:DataGridColumn headerText="DateString" dataField="dateString"
      rendererIsEditor="true"
      itemRenderer="EnhancedDateField2"
      editorDataField="selectedDate"/>
      <mx:DataGridColumn headerText="Date" dataField="dateString" width="120"
      itemRenderer="DateEditor"
      rendererIsEditor="true"
      editorDataField="selectedDate"/>
      <mx:DataGridColumn headerText="Contact" dataField="contact" width="80"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:Application>


      EnhancedDateField2.as
      ------------------------------------

      package
      {
      import mx.controls.DateField;
      import mx.controls.listClasses.BaseListData;
      import mx.controls.listClasses.IListItemRenderer;
      import mx.controls.dataGridClasses.DataGridListData;



      public class EnhancedDateField2 extends DateField
      {
      public var _ld:BaseListData;

      override public function get listData():BaseListData
      {
      return _ld;
      }
      override public function set listData(value:BaseListData):void
      {
      _ld = value;
      }

      private var _dd:Object;

      override public function get data():Object
      {
      return _dd;
      }

      override public function set data(value:Object):void
      {
      _dd = value;

      if (_ld && _ld is DataGridListData)
      {
      if(value[DataGridListData(_ld).dataField] == null)
      {
      //super.data = "";
      return;
      };
      if(value[DataGridListData(_ld).dataField] == "")
      {
      //super.data = null;
      return;
      };
      var s:String = value[DataGridListData(_ld).dataField].toString();
      super.data = new Date(Date.parse(s));
      }
      }
      }
      }