3 Replies Latest reply on Aug 30, 2010 7:34 AM by MoonlightWare

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

    flex4 Level 2

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

        • 1. Re: How can we enter the data dynamically from datagrid to an arraycollection?
          MoonlightWare Level 1

          Set the dataProvider of the dataGrid to an ArrayCollection event an empty one. Then have some thing like a new button that calls a function and in that function us the addItem to add a new object to the ArrayCollection see below.

           

          private function newRecord():void {

          ac.addItem({col1:"",col2:"", col3:""});

          }

           

          in the example col1, col2 and col3 are the objects in the ArrayCollection. they are also the dataFields of the dataGridColumns.

           

          Hope this helps.

          • 2. Re: How can we enter the data dynamically from datagrid to an arraycollection?
            flex4 Level 2

            Hi

             

                            Thanks for reply My question is how to make datagrid editable so that it will  ready to accept data dynamically and update the arraycollection...

             

             

                                   I dont have any records displayed initially in datagrid . what i want now is if  i enter anything in datagrid it needs to accept the data and update the arraycollection automatically

             

                     I think u understand my question ...?

            • 3. Re: How can we enter the data dynamically from datagrid to an arraycollection?
              MoonlightWare Level 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