List/ComboBox Row Backgrounds in Flex

All the listy components in Flex (List, Datagrid, Tree, etc.) have a protected method called drawRowBackground which is in charge of drawing the background for a given row. You typically use it to color a given row based on some facet of the data the row represents (e.g. red background for rows with a negative bank balance).

With DataGrid, it's easy to use, just subclass DataGrid and override the method, parameterized so you can pass in a function to compute the color for each row based on the row index/data/original color/etc. With List (and since ComboBox uses a List, ComboBox too), it's a bit nastier.

For some reason, List will only call drawRowBackground if the 'alternatingItemColors' style is set for the List. So if you want to color your List rows, you have to supply that style, which you'll likely immediately be overriding.

With ComboBox, you use a ClassFactory for the dropdownFactory to instruct it to use your custom List implementation (that will do row coloring). In this case, however, it's not the List instance that needs the 'alternatingItemColors' style, but the ComboBox. The ComboBox passes all it's style attributes to the List that backs the dropdown when it's created.

Just for reference, here is my subclass of List to allow row coloring. The one for DataGrid is identical, except for the name and the class it's extending:

package views {
  import mx.controls.List;
  import mx.collections.IList;
  import flash.display.Sprite;

  public class RowColoringList extends List {

    public var rowColoringFunction:Function;

    protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {
      if (rowColoringFunction != null && IList(dataProvider).length > dataIndex) {
        color = rowColoringFunction(IList(dataProvider).getItemAt(dataIndex), dataIndex, color);
      super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);


12 responses to “List/ComboBox Row Backgrounds in Flex”

  1. List/ComboBox Row Backgrounds in Flex « Flash Enabled - Get Ready With Flash…

    [...] Row Backgrounds in Flex Barney wrote: All the listy components in Flex (List, Datagrid, Tree, etc.) have a protected method called [...]

  2. Ryan

    Do you have an example for DataGrid?

  3. Code Sweat Blog » Blog Archive » Some Flex 2 Related Links (pt. two)

    [...] List/ComboBox Row Backgrounds in Flex at BarneyBlog [...]

  4. Amit

    Hi, I need different row colors(not alternating) in a Tree based on some condition. Any idea how to do this?

  5. Christian


    The thing is that I have the list with a vertical scroll bar…. If, for instance, the second item is "orange", when is scroll down the third item will become orange. If I scroll once more the fourth is "orange", etc…

    I want the colour to be attached to the actual ITEM… not to the index shown on screen!.

    Can you help please.


  6. kandasami raja

    i created a custom list component class and i override the drawRowBackground method as u mentioned .wen i create object for RowColoringList it cannot call the drawRowBackground method . wen will this method will call. do u hava any sample files

    kandasami raja.c

    kandaraja @ gmail . com

  7. Syed

    in the drawRowBackground…

    override protected function drawRowBackground(s:Sprite,
            rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
      	    	var newColor:uint;

    use the dataIndex… not the rowIndex

  8. Theo Denovan

    The drawRowBackground method is not called by the List class in Flex unless the style alternatingItemColors style is specified. (The method is called by the drawRowBackgrounds method).

    The simplest alternative is to override the drawRowBackgrounds method, duplicating the base functionality but removing the alternatingItemColors style check.