1 Reply Latest reply on Aug 23, 2009 2:33 PM by paul.williams

    Advanced Datagrid Row Background Color Customizing

    emansouri Level 1

      I was quite troubled last night when I went to attempt to implement custom colored rows in an Advanced Data Grid.  I was even more troubled when the standard solution I've researched that people have been implementing for this challenge is not working for me in a Flex 4 project.

       

      My understanding is the standard way to tackle this is to override drawBackgroundRow and explicitly set a new color value.  Trace statements reveal that my overridden drawBackgroundRow is indeed getting called, but my attempts to set the background color for the rows is ignored.

       

      I'll add that my Advanced Data Grid is a custom class extended from AdvancedDataGrid (so that I can override drawBackgroundRow), it has 4 columns, and one column has an iconFunction implemented and the other 3 have labelFunctions implemented.  I am not sure if this has anything to do with why my overridden drawBackgroundRow doesn't seem to affect the changes as they've been advertised.

       

      Any leadership or help here is most appreciated.  The ability to differentiate different rows in an AdvancedDataGrid seems like a very fundamental method that should be implemented out of the box, and frankly, I was surprised to not see a clear cut means of doing this amongst AdvancedDataGrid's myriad methods.

        • 1. Re: Advanced Datagrid Row Background Color Customizing
          paul.williams Level 4

          I have just had a quick go, and it seems to work ok for me. Here's the

          code for getting random row colors:

           

          package

          {

              import flash.display.Sprite;

              

              import mx.controls.AdvancedDataGrid;

              

              public class CustomAdg extends AdvancedDataGrid

              {

                  protected override function drawRowBackground(

                      s:Sprite,

                      rowIndex:int,

                      y:Number,

                      height:Number,

                      color:uint,

                      dataIndex:int):void

                  {

                      super.drawRowBackground( s, rowIndex, y, height,

          Math.random() * 16777216, dataIndex );

                  }

              }

          }

           

          And the adg is declared as:

           

          <local:CustomAdg

                  height="400"

                  width="300"

                  dataProvider="">

                  <local:columns>

                      <mx:AdvancedDataGridColumn

                          dataField="Artist"/>

                      <mx:AdvancedDataGridColumn

                          dataField="Album"/>

                      <mx:AdvancedDataGridColumn

                          dataField="Price"/>  

                  </local:columns>

             </local:CustomAdg>

           

          It is possible that other style properties could interfere with what you

          are doing. For example, column backgrounds appear to take precedence

          over row backgrounds. Ideally you would be able to set the background

          color of a row using a styleFunction, but this affects renderers

          directly rather than the  internal display objects that are used for row

          and column backgrounds. The default renderer class does not have a

          backgroundColor style, so setting this in the styleFunction will have no

          effect.

           

          If you are still having issues, go back to basics with no extra styles,

          icon function, label function etc to see if you can get a simpler

          example to work.

           

          You may also want to take a look at this alternative approach:

           

          http://flexpearls.blogspot.com/2008/02/row-background-color-in.html