8 Replies Latest reply on Jun 14, 2009 11:43 PM by AngeloAnolin

    ArrayCollection and Datagrid Binding and DataProvider Question

    AngeloAnolin

      Good day.

       

      Learning Flex here for the past two (like three actually) weeks.  Using only mxml compiler.

       

      I have a question with regards to the above subject:

       

      Assuming I declared an ArrayCollection as follows:

      [Bindable] private var _arrItems:ArrayCollection = new ArrayCollection([{"itemNo":"1", "testItem":"Angelo"}, {"itemNo":"2", "testItem":"Dinah"}]);

       

      This array I am binding to a datagrid as follows:

       

      <mx:DataGrid id="dgOutwardList"
        dataProvider="{_arrItems}"
        useRollOver="false"
        height="450"
        width="100%"
        verticalScrollPolicy="auto"
        sortableColumns="false"
        draggableColumns="false"
        resizableColumns="false">

      <mx:columns>

      <mx:DataGridColumn headerText="" dataField="itemNo" width="20"/>

      <mx:DataGridColumn headerText="Name of Passengers" dataField="testItem" width="200">
        <mx:itemRenderer>
         <mx:Component>
          <mx:TextInput width="100%" />
         </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>

      </mx:columns>
      </mx:DataGrid>

       

      No problem initially, as the itemNo and the testItem values are displayed properly on the datagrid.

      Now for example, if I modified my first row which contains itemNo:1 and testItem:Angelo, where I changed Angelo to Mickey, will the dataprovider reflect the change in the said row?

       

      How do I make so that the changes in the datagrid be reflected into the ArrayCollection?  such that when I changed the testItem data for the first row and access the item, via:


      _arrItems.getItemAt(arrLength -1).itemNo
      _arrItems.getItemAt(arrLength -1).testItem

       

      The result would be "1" and "Mickey" respectively?

       

      I am a bit puzzled on how databinding actually works in Flex. Is it like a two-way live update (such that when you modify the value in the datagrid, it is reflected back to the arraycollection)?

       

      Would love to hear your inputs.

      Thanks and regards,

      Angelo

        • 2. Re: ArrayCollection and Datagrid Binding and DataProvider Question
          Michael Borbor Level 4

          If you're using the Flex 4 SDK you'll get a two way binding, if you're using

          the Flex 3 SDK than it's only a one-way binding. Most of the time you'll

          only need to update your ArrayCollection and the binding mechanisms will

          update the DG or any other Data component that you could use.

          • 3. Re: ArrayCollection and Datagrid Binding and DataProvider Question
            AngeloAnolin Level 1

            Hi Ben,

             

            This is certainly helpful.  I understand a bit of the binding thing, but needs further more answers in it.

             

            Based on what I have displayed so far, the initial binding works, but when I modify the underlying textInput control in my ItemRenderer inside the datagrid, when I check the dataprovider (in this case the ArrayCollection), the value still remains the same.

             

            How would I then ensure that when I modify the textInput in the datagrid, the same is reflected into the data provider?

             

            Thanks.

             

            Angelo

            • 4. Re: ArrayCollection and Datagrid Binding and DataProvider Question
              AngeloAnolin Level 1

              Hi Michael,

               

              When you said here two-way binding, then does it also mean that for example, the data of the data provider is also updated when I made some changes to it via the datagrid?

               

              I am still a bit muffed by how this actually works and it certainly would help if some examples are provided using a datagrid (with items rendered via itemrenderer) and an array collection as data provider.  When the data in the datagrid is changed, do I need to call an event or method to also update the data of the underlying data provider?

               

              Thanks.

               

              Regards,

               

              Angelo

              • 6. Re: ArrayCollection and Datagrid Binding and DataProvider Question
                AngeloAnolin Level 1

                Hi Michael,

                 

                Thanks for the link.

                 

                But I did set my datagrid itemrenderer to be a textInput as seen from this:

                 

                <mx:DataGrid id="dgOutwardList"
                  dataProvider="{_arrItems}"
                  useRollOver="false"
                  height="450"
                  width="100%"
                  verticalScrollPolicy="auto"
                  sortableColumns="false"
                  draggableColumns="false"
                  resizableColumns="false">

                <mx:columns>

                <mx:DataGridColumn headerText="" dataField="itemNo" width="20"/>

                <mx:DataGridColumn headerText="Name of Passengers" dataField="testItem" width="200">
                  <mx:itemRenderer>
                   <mx:Component>
                    <mx:TextInput width="100%" />
                   </mx:Component>
                  </mx:itemRenderer>
                </mx:DataGridColumn>

                </mx:columns>
                </mx:DataGrid>


                Basically, what I need to accomplish is that for example, a user modified the value for one datagrid row, say he changed the name of the Passengers, then the underlying dataprovider (_arrItems) would get the changes done in the datagrid.

                 

                So for example, if my arraycollection has initially the following values:

                 

                {"itemNo":"1", "name":"Angelo"}, {"itemNo":"2", "name":"Dinah"}

                 

                then the datagrid would simply display it as:

                 

                1  Angelo
                2  Dinah

                 

                where the 'names' are rendered inside the textInput control.

                 

                Now when I modify the datagrid, for example, change the name of the first row from Angelo to Mickey, then the arraycollection should now have the following values:

                 

                {"itemNo":"1", "name":"Mickey"}, {"itemNo":"2", "name":"Dinah"}

                 

                I do not know which event to trigger so that the underlying data provider is also updated when the datagrid has been modified.

                 

                Thanks.

                • 7. Re: ArrayCollection and Datagrid Binding and DataProvider Question
                  SteveDepp

                  You need to monitor the itemEditEnd event and then modify the underlying dataprovider with the new data.

                   

                  Something like this:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                       <mx:Script>
                           <![CDATA[
                               import mx.controls.TextInput;
                               import mx.events.DataGridEvent;
                               import mx.collections.ArrayCollection;
                              
                               private var _arr:Array = [{"itemNo":"1", "name":"Angelo"}, {"itemNo":"2", "name":"Dinah"}];
                               [Bindable] private var _arrItems:ArrayCollection = new ArrayCollection(_arr);
                              
                               private function updateData(event:DataGridEvent):void
                               {
                                   (_arr[event.rowIndex] as Object).name = (dgOutwardList.itemEditorInstance as TextInput).text;
                               }


                          ]]>
                       </mx:Script>
                       <mx:DataGrid id="dgOutwardList"
                         dataProvider="{_arrItems}"
                         editable="true"
                         useRollOver="false"
                         height="450"
                         width="100%"
                         verticalScrollPolicy="auto"
                         sortableColumns="false"
                         draggableColumns="false"
                         resizableColumns="false"
                         itemEditEnd="updateData(event)">
                           <mx:columns>
                               <mx:DataGridColumn headerText="Item No" dataField="itemNo" width="20" editable="false"/>
                               <mx:DataGridColumn headerText="Name of Passengers" dataField="name" width="200" editable="true" />
                           </mx:columns>
                       </mx:DataGrid>
                  </mx:Application>


                  • 8. Re: ArrayCollection and Datagrid Binding and DataProvider Question
                    AngeloAnolin Level 1

                    I've set up my datagrid property:

                     

                    editable="true"

                     

                    and the underlying data provider is being modified when I make changes to elements in my datagrid.