<?xml version="1.0" encoding="iso-8859-1"?>

<!--
  Este exemplo mostra como tornar um DataGrid editável.
  Observe que, quando alteramos o conteúdo das células
  do DataGrid, o conteúdo do ArrayCollection também é
  alterado. Para visualizar isso, basta efetuar
  alterações nas células e depois pressionar Enter. 
  Automaticamente a alteração é visualizada no segundo 
  DataGrid. Veja que usamos [Bindable] para "atrelar" 
  o ArrayCollection aos DataGrids.

  Obs. Se estiver navegando pelas células usando TAB, as
  alterações nas células são enviadas ao ArrayCollection
  somente quando houver mudança de linha. 
-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  creationComplete="creationCompleteHandler(event)">

  <mx:Panel id="painel" title="Estudos" status="Active" 
     height="400" width="400" paddingTop="10" 
     paddingLeft="10" paddingRight="10" 
     paddingBottom="10">

    <mx:DataGrid id="grid" editable="true">
      <mx:columns>
        <mx:DataGridColumn headerText="Cidade" 
           dataField="cidade"/>
        <mx:DataGridColumn headerText="Estado"  
           dataField="estado"/>
        <mx:DataGridColumn headerText="População"  
           dataField="populacao"/>
      </mx:columns>
    </mx:DataGrid>

    <mx:DataGrid id="grid2">
      <mx:columns>
        <mx:DataGridColumn headerText="Cidade" 
           dataField="cidade"/>
        <mx:DataGridColumn headerText="Estado"  
           dataField="estado"/>
        <mx:DataGridColumn headerText="População"  
           dataField="populacao"/>
      </mx:columns>
    </mx:DataGrid>

  </mx:Panel>

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;

      [Bindable]
      public var cidades:ArrayCollection;

      private function creationCompleteHandler(
          event:Event):void{
        var aCidades:Array = new Array(
          {cidade: "Goiânia",
          estado: "GO", populacao: 2564334},
          {cidade: "Cuiabá",
          estado: "MT", populacao: 598122},
          {cidade: "Curitiba",
          estado: "PR", populacao: 4876923});

        cidades = new 
          ArrayCollection(aCidades);
        grid.dataProvider = cidades;
        grid2.dataProvider = cidades;
      }
    ]]>
  </mx:Script>

</mx:Application>