0 Replies Latest reply on Sep 17, 2010 8:10 PM by vunnikri

    Excellent Way to Color Code Datagrid Rows!

    vunnikri

      I searched for a long time to find the method to color code datagrid rows based on row parameters. Found it, and thought i should share for the not so lucky ppl.

       

      So, here goes.

       

      STEP 1: Create your custom component.

      package it.RowColorDataGrid

      {

      import flash.display.Sprite;

       

      import mx.collections.ArrayCollection;

      import mx.controls.DataGrid;

       

      public class RowColorDataGrid extends DataGrid

      {

      public var rowColorFunction:Function;

       

      override protected function drawRowBackground(s:Sprite,

      rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void

      {

      if(rowColorFunction != null && dataProvider != null)

      {

      var item:Object;

      if(dataIndex < dataProvider.length)

      {

      item = dataProvider[dataIndex];

      }

       

      if(item)

      {

      color = rowColorFunction(item, rowIndex, dataIndex, color);

      }

      }

       

      super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);

      }

      }

      }

       

       

      STEP 2: Use the component in your UI.

       

      <

       

      mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"

       

      xmlns:local="it.RowColorDataGrid.*" horizontalAlign="center" verticalAlign="middle" currentState="Initializing"

       

      creationComplete="controller.init(this)" xmlns:mate="http://mate.asfusion.com/">

       

      <

      local:RowColorDataGrid id="recoverytbl" dataProvider="{parentApplication.model.requestlist}"

      rowColorFunction="calcRowColor" >

       

      <local:columns>

      <mx:DataGridColumn headerText="Recovery" dataField="name" />

      <mx:DataGridColumn headerText="Status" dataField="status" />

      </local:columns>

      </local:RowColorDataGrid>

       

       

      STEP 3: Function to set the color codes.

       

      private function calcRowColor(item:Object, rowIndex:int, dataIndex:int, color:uint):uint

      {

      if(item.status == 'COMPLETED')

      return 0x49FFAD;

      else

      if(item.status == 'PAUSED')

      return 0xFFFF00;

      else

      if(item.status == 'ABORTED')

      return 0xAB82FF;

      else

      if(item.status == 'ERROR')

      return 0xFF3030;

      else

      return color;

      }