Cómo colorear una fila de un DataGrid en Flex

En este tip explicaré cómo colorear una fila dentro de un componente dataGrid en Flex.

Primero que todo hago una clase llamada myDataGrid que extiende de mx.controls.Datagrid y la situo en la misma carpeta del proyecto Flex, (la puedes poner donde quieras y después especificar en el package de la clase la ruta.)

MyDataGrid.as

Código :

package { 

  import mx.controls.DataGrid;
  public class myDataGrid extends DataGrid {

  }
}

Dentro de ella sobre-escribimos el método drawRowBackground que no es mas que el método en el datagrid que se encarga de pintar el fondo de la celda..

Código :

package { 
    import mx.collections.ArrayCollection;
    import mx.controls.DataGrid;
    import flash.display.Sprite;

  public class myDataGrid extends DataGrid {
       override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number,height:Number,color:uint,dataIndex:int):void  
        {  
         var dp:ArrayCollection = dataProvider as ArrayCollection;
         var item:Object;
                          
         if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);
         if( item != null && item.price < 20 ) color = 0xFF8800;
         else color = 0xFFFFFF;
         
         super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
         } 
  }
}

Desmenuzando un poco este código..

var dp:ArrayCollection = dataProvider as ArrayCollection; --> Creamos un arrayCollection dp que le pasaremos el contenido del dataProvider del Grid en cuestión [el mismo.]

var item:Object; --> Una variable objet para almacenar temporalmente el contenido de la fila

if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex); --> Aqui le añado el contenido de la fila actual a item SI el dataIndex [indice de la fila actual] es menor que el largo del arrayCollection dp que es la copia del dataProvider. (el # de filas de un datagrid no es = al numero de elementos del dataProvider!)

if( item != null && item.price < 20 ) color = 0xFF8800; --> aquí digo que si ítem que es el que contiene los valores de la fila actual no es null y ademas el campo price <20 la variable color sera un naranja claro..

else color = 0xFFFFFF; --> Si no la variable color sera blanca...

super.drawRowBackground(s,rowIndex,y,height,color,dataIndex); --> aquí invocamos al metodo drawRowBackground de la superclase... (dataGrid)... dentro de los parámetros que se le pasa..

Bien ahora abrimos nuestro proyecto Flex. y creamos el siguiente script que nos llena un arrayCollection provisional ..

Código :

<mx:Script>
   <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] public var f:ArrayCollection = new ArrayCollection();
      
      function a()
      {
         var h:Object = new Object();
         for(var i:int=0;i<10;i++)
         {
            h = {};
            h["products"] = "Judias_"+i.toString();
            h["price"] = 10*i;
            f.addItem(h);
         }
      }
   ]]>
</mx:Script>

Ahora insertamos nuestro GRID (myDataGrid)...

Código :

<local:myDataGrid dataProvider="{ f }" >
   <local:columns>
      <mx:DataGridColumn headerText="Column 1" dataField="products"/>
      <mx:DataGridColumn headerText="Column 2" dataField="price"/>
   </local:columns>
</local:myDataGrid>

Ejecutamos y listo. Este es el resultado:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.