Aunque este post vaya dirigido al DataGrid y el AdvancedDataGrid, sirve también para otros componentes que muestren la información basada en un ArrayCollection, tales como una lista, un combo o un Tree.
Flex/AIR nos permite controlar el modo en que se van visualizando los datos a partir de la colección de datos. Esto se puede controlar gracias a la propiedad labelFunction, que estos componentes.
El funcionamiento es muy sencillo. Se indica en esta propiedad el nombre de una función o método que se ejecutará cada vez que trate el dato (en cada fila y columna en el caso de los DataGrid). En la definición del correspondiente DataGridColumn o de AdvancedDataGridColumn (el que contenga la revisión de la información a tratar). Ejemplo:
<mx:AdvancedDataGridColumn
dataField="product_raw"
labelFunction="replaceValuesColumn"/>
La función se definiría así:
private function replaceValuesColumn(
item:Object, column:AdvancedDataGridColumn):String
{
// Código que tratará cada dato
}
Los parámetros dependerán de cada tipo de componente. En el caso de un DataGrid, el parámetro 'column' será de tipo DataGridColumn. Las listas no tienen este parámetro.
Esta función se lanzará cada vez que el DataGrid (en este caso) vaya a rellenar esa columna en la fila actual. Aquí se evaluará los valores y, en consecuencia, decidir qué dato visualizar, el cual será indicado en el return de la función en formato String. En nuestro caso, el campo' product_raw' contiene los datos true o false, que indican si el producto es un ingediente o un producto elaborado.
El código a utilizar dentro en la función 'replaceValuesColumn' (se puede dar el nombre que uno quiera) sería el siguiente:
private function replaceValuesColumn(
item:Object, column:AdvancedDataGridColumn):String
{
var result:String="";
if (item.product_raw==true)
result="Ingrediente";
else if (item.product_raw==false)
result="Elaborado";
return result;
}
Resumiendo: los componentes, a la hora de rellenar cada dato en el componente, permiten utilizar una función para el tratamiento específico de dicho dato. Dicha función evalúa el dato y devuelve el valor que se ha de utilizar para visualizarlo.
En el caso de un AdvancedDataGrid, si hace uso de un agrupamiento, el tratamiento del item se complica, pues la estructura interna a la hora de agrupar varía.
Como ejemplo vamos ver el siguiente AdvancedDataGrid:
En este caso tenemos un agrupamiento por el campo "name_product_type" (tipo de producto), y además un campo resumen (Total). Al depurar la función, veremos que cuando se trata del agrupamiento, se crea un nivel de colección children con los datos del item en su interior, mientras que si trata directamente las filas de datos (ya agrupadas), este nivel no existe. Para tratar este caso, el código a utilizar sería el siguiente:
private function replaceValuesColumn(
item:Object, column:AdvancedDataGridColumn):String
{
var result:String="";
try {
if (item.product_raw==true)
result="Ingrediente";
else if (item.product_raw==false)
result="Elaborado";
}
catch (e:Error) {
if (item.children[0].product_raw==true)
result="Ingrediente";
else if (item.children[0].product_raw==false)
result="Elaborado";
}
return result;
}
