You apply styles to the rows and columns of the AdvancedDataGrid control by using callback functions. To control the styling of a row, use the AdvancedDataGrid.styleFunction property to specify the callback function; to control the styling of a column, use the AdvancedDataGridColumn.styleFunction property to specify the callback function.

The callback function specified by the AdvancedDataGrid.styleFunction property is invoked first, followed by the function specified by the AdvancedDataGridColumn.styleFunction property. Therefore, the
AdvancedDataGrid control applies styles to rows first, and then to columns.

The callback function must have the following signature:

function_name(data:Object, column:AdvancedDataGridColumn):Object

The function returns an Object that contains one or more styleName:value pairs to specify a style setting, or null. The styleName field contains the name of a style property, such as color, and the value field contains the value for the style property, such as 0x00FF00. For example, you could return two styles using the following code

{color:0xFF0000, fontWeight:"bold"}

The AdvancedDataGrid control invokes the callback function when it updates its display, such as when the control is first drawn on application start up, or when you call the invalidateList()method.

The examples in this section use callback functions to set the style of an AdvancedDataGrid control. All of the examples in this section use the following data from the StyleData.as file:

[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
    {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
    {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
    {Artist:'Saner', Album:'A Child Once', Price:11.99},
    {Artist:'Saner', Album:'Helium Wings', Price:12.99},
    {Artist:'The Doors', Album:'The Doors', Price:10.99},
    {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
    {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
    {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
    {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
    {Artist:'The Doors', Album:'Strange Days', Price:12.99},
    {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]); 

Styling rows

The following example uses the AdvancedDataGrid.styleFunction property to specify a callback function to apply styles to the rows of an AdvancedDataGrid control. In this example, you use Button controls to select an artist in the AdvancedDataGrid control. Then the callback function highlights in red all rows for the selected artist.

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGRowStyleFunc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
      <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            
          // Include the data for the AdvancedDataGrid control.
          include "StyleData.as"
            
          // Artist name to highlight.    
          protected var artistName:String;
        
          // Event handler to set the selected artist's name
          // based on the selected Button control.
          public function setArtistName(event:Event):void
          {
             artistName=Button(event.currentTarget).label; 
             // Refresh row display.
             myADG.invalidateList();
          }
        
          // Callback function that highlights in red 
          // all rows for the selected artist.
          public function myStyleFunc(data:Object, 
            col:AdvancedDataGridColumn):Object
          {
             if (data["Artist"] == artistName) 
                return {color:0xFF0000}; 
            
             // Return null if the Artist name does not match.
             return null;      
          }
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid id="myADG"
        width="100%" height="100%"
        dataProvider="{dpADG}"
        styleFunction="myStyleFunc">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Artist"/>
            <mx:AdvancedDataGridColumn dataField="Album"/>
            <mx:AdvancedDataGridColumn dataField="Price"/>
        </mx:columns>
    </mx:AdvancedDataGrid>        
   
    <mx:HBox>
       <mx:Button label="Pavement" click="setArtistName(event);"/>
       <mx:Button label="Saner" click="setArtistName(event);"/>
       <mx:Button label="The Doors" click="setArtistName(event);"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Styling columns

The following example modifies the example in the previous section to use a callback function to apply styles to the rows and one column of an AdvancedDataGrid control. In this example, the Price column displays all cells with a price less than $11.00 in green:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGColumnStyleFunc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
      <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            
          // Include the data for the AdvancedDataGrid control.
          include "StyleData.as"
            
          // Artist name to highlight.    
          protected var artistName:String;
        
          // Event handler to set the selected artist's name
          // based on the selected Button control.
          public function setArtistName(event:Event):void
          {
             artistName=Button(event.currentTarget).label; 
             // Refresh row display.
             myADG.invalidateList();
          }
        
          // Callback function that highlights in red 
          // all rows for the selected artist.
          public function myStyleFunc(data:Object, 
            col:AdvancedDataGridColumn):Object
          {
             if (data["Artist"] == artistName) 
                return {color:0xFF0000}; 
            
             // Return null if the Artist name does not match.
             return null;      
          }

         // Callback function that hightlights in green
         // all entries in the Price column 
         // with a value less than $11.00. 
         public function myColStyleFunc(data:Object, 
            col:AdvancedDataGridColumn):Object
         {
             if(data["Price"] <= 11.00)
                 return {color:0x00FF00};
 
             return null;
         }                         
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid id="myADG"
        width="100%" height="100%"
        dataProvider="{dpADG}"
        styleFunction="myStyleFunc">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Artist"/>
            <mx:AdvancedDataGridColumn dataField="Album"/>
            <mx:AdvancedDataGridColumn dataField="Price" 
                styleFunction="myColStyleFunc"/>
        </mx:columns>
    </mx:AdvancedDataGrid>        
   
    <mx:HBox>
       <mx:Button label="Pavement" click="setArtistName(event);"/>
       <mx:Button label="Saner" click="setArtistName(event);"/>
       <mx:Button label="The Doors" click="setArtistName(event);"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Using a data formatter in a column

The AdvancedDataGridColumn class contains a formatter property that lets you pass an instance of the Formatter class to the column, or an instance of a subclass of the Formatter class. The formatter classes convert data into customized strings. For example, you can use the CurrencyFormatter class to prefix the value in the Price column with a dollar ($) sign.

You use a formatter class with a callback function specified by the labelFunction property or the styleFunction property. If you specify a callback function, Flex invokes that formatter class after invoking the callback functions.

The following example modifies the example from the section Styling rows to add a CurrencyFormatter class to the Price column to prefix the price with the $ sign:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADGRowFormatter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
      <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            
          // Include the data for the AdvancedDataGrid control.
          include "StyleData.as"
            
          // Artist name to highlight.    
          protected var artistName:String;
        
          // Event handler to set the selected artist's name
          // based on the selected Button control.
          public function setArtistName(event:Event):void
          {
             artistName=Button(event.currentTarget).label; 
             // Refresh row display.
             myADG.invalidateList();
          }
        
          // Callback function that hightlights in red 
          // all rows for the selected artist.
          public function myStyleFunc(data:Object, 
            col:AdvancedDataGridColumn):Object
          {
             if (data["Artist"] == artistName) 
                return {color:0xFF0000}; 
            
             // Return null if the Artist name does not match.
             return null;      
          }
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid id="myADG"
        width="100%" height="100%"
        dataProvider="{dpADG}"
        styleFunction="myStyleFunc">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Artist"/>
            <mx:AdvancedDataGridColumn dataField="Album"/>
            <mx:AdvancedDataGridColumn width="75" dataField="Price">
                <mx:formatter>
                    <mx:CurrencyFormatter/>
               </mx:formatter>
            </mx:AdvancedDataGridColumn>
        </mx:columns>
    </mx:AdvancedDataGrid>        
   
    <mx:HBox>
       <mx:Button label="Pavement" click="setArtistName(event);"/>
       <mx:Button label="Saner" click="setArtistName(event);"/>
       <mx:Button label="The Doors" click="setArtistName(event);"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below: