Utilizando un ItemRender en un DataGrid

En este ejemplo vamos llenar un DataGrid como lo hacemos normalmente, es decir, a través de su propiedad dataProvider. Lo que tendrá de particular será la manera como mostraremos la informacion dentro del DataGrid. Los datos seran mostrados de 5 maneras diferentes (Una manera por cada columna) utilizando la propiedad ItemRenderer de las columnas del DataGrid (DatagridColumns).

Los ItemRenderer que utilizaremos para mostrar la información serán los siguientes: RadioButton, NumericStepper, Image, CheckBox, TextInput. Si quieres saber como utilizar un ItermRender propio y mas complejo te recomiendo el tutorial Datagrid con un ItemRenderer Propio (Personalizado).

Bueno para empezar vamos a crear un nuevo proyecto en flex llamado DataGridSimpleItemrenderer, dentro de esta aplicacion vamos a agregar un nuevo Datagrid que va a contener 5 columnas, a cada una de las columnas le vamos a colocar la propiedad itemRenderer con la ruta a la clase de flex que vamos a utilizar para renderizar, por ejemplo, si se trata de un RadioButton debemos colocar mx.controls.RadioButton. Tambien debemos colocar la propiedad dataField con el nombre del atributo que va a contener la data que va a utilizar ese RadioButton para renderizarse, recuerden que el DataGrid se va a llenar con un arreglo de objetos (cada objeto va a tener un atributo que se va a user para renderizar una columna, ese atributo será el que colocaremos como dataField segun sea el caso). Por ultimo llenamos la pripiedad headerText con el mobre que le queremos dar a esa columna.

Una vez creado el DataGrid y colocados estos atributos en las columnas del DataGrid tendremos el siguiente codigo:

<mx:DataGrid id="dg" x="10" y="10" dataProvider="{datos}" rowHeight="25" width="288">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" itemRenderer="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" itemRenderer="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>

Ahora debemos crear una funcion llamada "init" que llamaremos cuando ocurra el evento CreationComplete de la aplicación, esta función se encargara de llenar el arreglo dataProvider que contendrá el DataGrid, recuerden que los objetos que le vamos a insertar a este dataProvider deben tener atributos iguales a los que mencionamos como dataField en las columnas del DataGrid. Al final tendremos todo el codigo de la aplicación como lo siguiente:

<?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;

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

public function init() : void
{
var obj : Object = new Object();
obj.checkBoxValue = true;
obj.radioValue = false;
obj.numeriValue = 7;
obj.textValue = "Hola Mundo";
obj.url = "http://aalejo.googlepages.com/idea.jpg";

datos.addItem(obj);
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10" dataProvider="{datos}" rowHeight="25" width="288">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" itemRenderer="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" itemRenderer="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Bueno esto es todo, de todas maneras aqui les dejo el codigo de la aplicacion para que lo puedan descargar, y tambien pueden ver el ejemplo en funcionamiento. Cualquier duda me pueden escribir a mi email aalejo@gmail.com.