Obtener una celda o dato de un Datagid

Un breve ejemplo de como obtener los datos de un datagrid por medio de su propiedad dataProvider.

En el ejemplo vamos a usar un ArrayCollection para llenar un Datagrid, luego vamos a obtener la fila deseada del Datagrid segun el "numero de fila". Tambien vamos a ser capaces de detectar cual es la fila que esta seleccionada y obtener su informacion con la propierar selectedIndex de la clase Datagrid.

Para empezar vamos a crear una clase Persona con los datos: Nombre, Apellido y cedula:

Archivo clase Persona.as

package com
{
public class Persona
{
public var nombre : String;
public var apellido : String;
public var cedula : String;


public function Persona()
{
}

}
}

Luego debemos en la aplicacion principal crear una funcion handler llamada "init" para el evento creationComplete, este evento se dispara apenas la aplicacion se acaba de terminar de crear y esta lista para empezar a ejecutarse, creamos un ArrayCollection y agregarle por ejemplo, dos personas cuales quiera:

public function init() : void
{
var persona1 : Persona = new Persona();
persona1.nombre = "Alejandro";
persona1.apellido = "Sanchez";
persona1.cedula = "17405689";

var persona2 : Persona = new Persona();
persona2.nombre = "Ramon";
persona2.apellido = "Ramos";
persona2.cedula = "14758243";

personas.addItem(persona1);
personas.addItem(persona2);
}

Recuerden colocar esta funcion como handler del evento creationComplete de la aplicacion.

Ahora debemos decirle al Datagrid que debe llenarse con la informacion de ese ArrayCollection, para eso utilizamos la propiedad dataProvider del Datagrid, ademas debemos decirle como manejar esa informacion, debemos crear tres columnas (DataGridColumn) dandole valores a las propiedades headerText (el nombre que queremos mostrar en el tope de esa columna) y dataField (el nombre de la propiedad de la clase persona que contiene el dato a mostrar):

<mx:DataGrid id="dg" x="10" y="10" dataProvider="{personas}">
<mx:columns>
<mx:DataGridColumn headerText="Nombre" dataField="nombre"/>
<mx:DataGridColumn headerText="Apellido" dataField="apellido"/>
<mx:DataGridColumn headerText="Cedula" dataField="cedula"/>
</mx:columns>
</mx:DataGrid>

Ahora procedemos a crear un pequeño formulario donde se van a mostrar los datos que vamos a obtener de la fila que se introduzca. Para eso vmos a crea el siguente fomulario:

<mx:TextInput id="nro" x="10" y="195" width="41"/>
<mx:Button x="59" y="195" label="Obtener" click="obtener()"/>
<mx:Label x="10" y="169" text="¿Qué fila deseas obtener?"/>
<mx:Canvas x="10" y="225" width="287" height="96" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="Nombre"/>
<mx:Label x="10" y="36" text="Apellido"/>
<mx:Label x="10" y="62" text="Cédula"/>
<mx:Label id="labelNombre" x="62" y="10" text="No definido"/>
<mx:Label id="labelApellido" x="62" y="36" text="No definido"/>
<mx:Label id="labelCedula" x="62" y="62" text="No definido"/>
</mx:Canvas>
<mx:Button x="140" y="195" label="La fila seleccionada" width="157" click="filaSeleccionada()"/>

Si se fijan hay dos cosas importantes aqui: La llamada a los metodos obtener() y filaSeleccionada() cuando el usuario haga click en cada uno de los botones, y que hemos identificado los controles que vamos a trabajar desde el codigo Action Script asignandoles una identificado String en la propiedad "id". Ahora debemos definir que van a realizar los metodos handlers que hemos colocado para manejar los eventos click.

public function obtener() : void
{
if(personas.length>Number(nro.text) && Number(nro.text)>=0)
{
var auxPersona : Persona = Persona(personas.getItemAt(Number(nro.text)));

labelApellido.text = auxPersona.apellido;
labelCedula.text = auxPersona.cedula;
labelNombre.text = auxPersona.nombre;
}
else
{
Alert.show('El indice excede el numero de filas o es negativo, recuerda que se empieza por el numero 0');
}

}

public function filaSeleccionada() : void
{
if(dg.selectedItem) nro.text = dg.selectedIndex.toString();
else Alert.show("Debes seleccionar un item");
}

El primer metodo (obtener) se encarga de obtener los datos del numero de fila que contenga el textInput llamado "nro". El segundo metodo obtiene el indice de la fila seleccionada (Si hay alguna, por supuesto).

Bueno al final el codigo de nuestro archivo aplicacion llamado ejemploDataGrid.mxml queda de la siguiente manera:
Archivo clase ejemploDatagrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import com.Persona;

[Bindable]
public var personas : ArrayCollection = new ArrayCollection();

public function init() : void
{
var persona1 : Persona = new Persona();
persona1.nombre = "Alejandro";
persona1.apellido = "Sanchez";
persona1.cedula = "17405689";

var persona2 : Persona = new Persona();
persona2.nombre = "Ramon";
persona2.apellido = "Ramos";
persona2.cedula = "14758243";

personas.addItem(persona1);
personas.addItem(persona2);
}

public function obtener() : void
{
if(personas.length>Number(nro.text) && Number(nro.text)>=0)
{
var auxPersona : Persona = Persona(personas.getItemAt(Number(nro.text)));

labelApellido.text = auxPersona.apellido;
labelCedula.text = auxPersona.cedula;
labelNombre.text = auxPersona.nombre;
}
else
{
Alert.show('El indice excede el numero de filas o es negativo, recuerda que se empieza por el numero 0');
}

}

public function filaSeleccionada() : void
{
if(dg.selectedItem) nro.text = dg.selectedIndex.toString();
else Alert.show("Debes seleccionar un item");
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10" dataProvider="{personas}">
<mx:columns>
<mx:DataGridColumn headerText="Nombre" dataField="nombre"/>
<mx:DataGridColumn headerText="Apellido" dataField="apellido"/>
<mx:DataGridColumn headerText="Cedula" dataField="cedula"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput id="nro" x="10" y="195" width="41"/>
<mx:Button x="59" y="195" label="Obtener" click="obtener()"/>
<mx:Label x="10" y="169" text="¿Qué fila deseas obtener?"/>
<mx:Canvas x="10" y="225" width="287" height="96" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="Nombre"/>
<mx:Label x="10" y="36" text="Apellido"/>
<mx:Label x="10" y="62" text="Cédula"/>
<mx:Label id="labelNombre" x="62" y="10" text="No definido"/>
<mx:Label id="labelApellido" x="62" y="36" text="No definido"/>
<mx:Label id="labelCedula" x="62" y="62" text="No definido"/>
</mx:Canvas>
<mx:Button x="140" y="195" label="La fila seleccionada" width="157" click="filaSeleccionada()"/>
</mx:Application>

El ejemplo en funcionamiento luce asi: