1 Reply Latest reply on Oct 26, 2007 2:44 AM by Sreenivas R

    When binding an ArrayCollection to a grid, should   updates to the items cause an immediate rerender/repaint?

    Level 7
      Hi all, I'm temporarily confused about databinding and I'm hoping to get some
      clarification. Given a DataGrid that is bound to an ArrayCollection, if
      updating the individual fields of a row in the ArrayCollection, should the grid
      automatically update the display? I'd always thought that the answer was yes,
      but it seems to be not the case.

      Attached at the bottom is a small example of a grid with an ArrayCollection,
      and 3 buttons, one to add rows, one to delete rows and one to change the first
      row. Clicking on the first or second button adds or deletes a row from the
      dataprovider and it's reflected in the GUI immediately. However the third
      buttom which changes a field doesn't actually update the display. If some
      other action needs to update the display, then we finally see the change.

      This is a practical question as I have a (far more complex example) of code
      that used to seem to work in a similar manner, but when upgrading from Flex 3
      beta 1 to beta 2 it stopped working. That's why I came up with this simple
      example, but found that it doesn't work in either beta 1 or beta 2! (Or Flex 2
      either). Thanks, any clarification would be greatly helpful.

      Jason

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute"
      creationComplete="init(event)">

      <mx:Script>
      <![CDATA[
      import mx.events.FlexEvent;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var _data : ArrayCollection = new ArrayCollection();

      private function init(event : FlexEvent) : void
      {
      // add some rows
      for (var i : int = 0; i < 10; i++)
      {
      var row : Object = new Object();
      row["field1"] = "Value";
      row["field2"] = "Value";
      _data.addItem(row);
      }
      }

      private function addRow(event : MouseEvent) : void
      {
      var row : Object = new Object();
      row["field1"] = "Value";
      row["field2"] = "Value";
      _data.addItem(row);
      }

      private function deleteRow(event : MouseEvent) : void
      {
      _data.removeItemAt(_data.length - 1);
      }

      private function changeRow(event : MouseEvent) : void
      {
      var row1 : Object = _data.getItemAt(0);
      row1.field1 = "Changed!";
      }

      ]]>
      </mx:Script>

      <mx:VBox width="100%" height="100%">
      <mx:HBox>
      <mx:Button label="Add Row" click="addRow(event)"/>
      <mx:Button label="Delete Row" click="deleteRow(event)"/>
      <mx:Button label="Change Row" click="changeRow(event)"/>
      </mx:HBox>
      <mx:VBox width="100%" height="100%">
      <mx:DataGrid dataProvider="{_data}" width="100%" height="100%">
      <mx:columns>
      <mx:DataGridColumn dataField="field1" />
      <mx:DataGridColumn dataField="field2" />
      </mx:columns>
      </mx:DataGrid>
      </mx:VBox>
      </mx:VBox>
      </mx:Application>