1 Reply Latest reply on Mar 2, 2011 1:05 AM by kss587

    headerColor for AdvancedDatagridColumn

    kss587

      Is there any possible way of giving each columngroup a different headercolor in the AdvancedDatagrid?

        • 1. Re: headerColor for AdvancedDatagridColumn
          kss587 Level 1

          1. Created a custom headerRenderer and overrided the updateDisplayList

           

          import

           

           

          flash.display.Graphics;

           

           

          import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;

           

           

          public class AdvancedDataGridHeaderRendererExt extends AdvancedDataGridHeaderRenderer

          {

           

          public var clr:uint = 0xFFFFFF;

           

          override protected function updateDisplayList(unscaledWidth:Number,

          unscaledHeight:Number):

          void

          {

           

           

          super.updateDisplayList(unscaledWidth, unscaledHeight);

           

          var g:Graphics = graphics;

          g.clear();

          g.beginFill(clr);

          g.drawRect(0, 0, unscaledWidth, unscaledHeight);

          g.endFill();

          }

          }

           

          2.Sample.mxml

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application

           

          xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:nes="renderer.*"

          >

           

           

          <mx:Script>

          <![CDATA[

           

          import mx.collections.ArrayCollection;

           

          [

          Bindable]

           

          private var dpHierarchy:ArrayCollection = new ArrayCollection([

          {Region:

          "Southwest", Territory:"Arizona",

          Territory_Rep:

          "Barbara Jennings",

          Actual:38865, Estimate:40000},

          {Region:

          "Southwest", Territory:"Arizona",

          Territory_Rep:

          "Dana Binn",

          Actual:29885, Estimate:30000},

          {Region:

          "Southwest", Territory:"Central California",

          Territory_Rep:

          "Joe Smith",

          Actual:29134, Estimate:30000},

          {Region:

          "Southwest", Territory:"Nevada",

          Territory_Rep:

          "Bethany Pittman",

          Actual:52888, Estimate:45000},

          {Region:

          "Southwest", Territory:"Northern California",

          Territory_Rep:

          "Lauren Ipsum",

          Actual:38805, Estimate:40000},

          {Region:

          "Southwest", Territory:"Northern California",

          Territory_Rep:

          "T.R. Smith",

          Actual:55498, Estimate:40000},

          {Region:

          "Southwest", Territory:"Southern California",

          Territory_Rep:

          "Alice Treu",

          Actual:44985, Estimate:45000},

          {Region:

          "Southwest", Territory:"Southern California",

          Territory_Rep:

          "Jane Grove",

          Actual:44913, Estimate:45000}

          ]);

           

          ]]>

           

          </mx:Script>

           

           

          <mx:AdvancedDataGrid id="myADG"

          dataProvider="

          {dpHierarchy}"

          width="

          100%" height="100%">

           

          <mx:groupedColumns>

           

          <mx:AdvancedDataGridColumn dataField="Territory_Rep"

          headerText="

          Territory Rep"/>

           

          <mx:AdvancedDataGridColumnGroup headerText="Area">

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xFFFF00"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

           

          <mx:AdvancedDataGridColumn dataField="Region" backgroundColor="0xFFFF00">

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xFFFF00"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

          </mx:AdvancedDataGridColumn>

           

          <mx:AdvancedDataGridColumn dataField="Territory" backgroundColor="0xFFFF00">

           

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xFFFF00"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

          </mx:AdvancedDataGridColumn>

           

          </mx:AdvancedDataGridColumnGroup>

           

          <mx:AdvancedDataGridColumnGroup headerText="Revenues" backgroundColor="0xFFFF00">

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xABAEB3"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

          <mx:AdvancedDataGridColumn dataField="Actual" backgroundColor="0xB5B1B2">

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xABAEB3"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

          </mx:AdvancedDataGridColumn>

           

          <mx:AdvancedDataGridColumn dataField="Estimate" backgroundColor="0xB5B1B2">

           

          <mx:headerRenderer>

           

          <mx:Component>

           

          <nes:AdvancedDataGridHeaderRendererExt horizontalAlign="center" clr="0xABAEB3"/>

           

          </mx:Component>

           

          </mx:headerRenderer>

           

          </mx:AdvancedDataGridColumn>

           

          </mx:AdvancedDataGridColumnGroup>

           

          </mx:groupedColumns>

           

          </mx:AdvancedDataGrid>

          </mx:Application>