How can we enter the data dynamically from datagrid to an arraycollection?

Question

Hi All
                    How can we make datagrid fields editable when it is in empty position i mean the datagrid doesn't have any data to display.. and it must accept the data and update the arraycollection dynamically..
             Now in my Application the datagrid is empty and it is not accepting any values and it still remain ideal..  i am unable to edit the datagrid fields in the datagrid .....
  Please some one tell me how can i achieve this...

Answer 1

Here is a very basic example.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">
<mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable] private var _dataProvider:ArrayCollection;
   private function onCreationComplete():void {
    _dataProvider = new ArrayCollection();
    for(var i:int = 1; i <= 100; ++i)
     _dataProvider.addItem({ROW:i,A:"",B:"",C:"",D:"",E:"",F:"",G:"",H:"",I:"",J:"",K:"",L:"", M:"",N:"",O:"",P:""});
  ]]>
</mx:Script>
<mx:Panel title="Editable DataGrid Example" height="472" width="584" horizontalCenter="0" verticalCenter="0">
  <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{_dataProvider}" editable="true" horizontalScrollPolicy="on" sortableColumns="false" draggableColumns="false">
   <mx:columns>
    <mx:DataGridColumn dataField="ROW" headerText="" width="30" sortable="false" draggable="false" editable="false" paddingLeft="0" paddingRight="0" textAlign="right"/>
    <mx:DataGridColumn dataField="A" headerText="A" width="100"/>
    <mx:DataGridColumn dataField="B" headerText="B" width="100"/>
    <mx:DataGridColumn dataField="C" headerText="C" width="100"/>
    <mx:DataGridColumn dataField="D" headerText="D" width="100"/>
    <mx:DataGridColumn dataField="E" headerText="E" width="100"/>
    <mx:DataGridColumn dataField="F" headerText="F" width="100"/>
    <mx:DataGridColumn dataField="G" headerText="G" width="100"/>
    <mx:DataGridColumn dataField="H" headerText="H" width="100"/>
    <mx:DataGridColumn dataField="I" headerText="I" width="100"/>
    <mx:DataGridColumn dataField="J" headerText="J" width="100"/>
    <mx:DataGridColumn dataField="K" headerText="K" width="100"/>
    <mx:DataGridColumn dataField="L" headerText="L" width="100"/>
    <mx:DataGridColumn dataField="M" headerText="M" width="100"/>
    <mx:DataGridColumn dataField="N" headerText="N" width="100"/>
    <mx:DataGridColumn dataField="O" headerText="O" width="100"/>
    <mx:DataGridColumn dataField="P" headerText="P" width="100"/>
   </mx:columns>
  </mx:DataGrid>
</mx:Panel>
</mx:Application>
Hope this helps