<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical">

  <mx:Style>
    DataGrid {
      useRollOver: true;
      selectionColor: yellow;   /* Works as per Flex documentation. */
      textSelectedColor: red;   /* Requires custom controls.        */
      rollOverColor: black;     /* Works as per Flex documentation. */
      textRollOverColor: white; /* Requires custom controls.        */
    }
  </mx:Style>

  <mx:Array id="cols">
    <mx:DataGridColumn dataField="@one" headerText="One"/>
    <mx:DataGridColumn dataField="@two" headerText="Two" sortable="false"/>
    <mx:DataGridColumn dataField="@three" headerText="Three"/>
  </mx:Array>

  <mx:XMLList id="data">
    <item one="1" two="2" three="3"/>
    <item one="4" two="5" three="6"/>
    <item one="7" two="8" three="9"/>
  </mx:XMLList>
  
  <mx:Text width="450">
    <mx:text>
      Both of the following DataGrid controls should change the color
      of the high-lighted row's text to white (according to the Flex
      documentation at least).  However, only the lower one
      works as expected.
    </mx:text>
  </mx:Text>

  <mx:Label text="Standard Flex DataGrid control:"/>
  <mx:DataGrid columns="{cols}" dataProvider="{data}"/>

  <mx:Label text="Custom DataGrid control:"/>
  <MyDataGrid columns="{cols}" dataProvider="{data}" itemRenderer="MyDataGridItemRenderer"/>

</mx:Application>