To control the display of an OLAPDataGrid control, you can apply styles to the cells of the control by using a callback function, or use item renderers to control the display.

Styling cells of the OLAPDataGrid control by using a callback function

To control the styling of a cell by using a callback function, use the OLAPDataGrid.styleFunction property to specify the callback function. The callback function must have the following signature:

function_name(row:IOLAPAxisPosition, column:IOLAPAxisPosition, value:Number):Object

where row is the IOLAPAxisPosition associated with this cell on the row axis, column is the IOLAPAxisPosition associated with this cell on the column axis, and value is the cell value.

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 syntax:

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

The OLAPDataGrid 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 following example modifies the example shown in the section Example using the OLAPDataGrid control to add a callback function to display all cells with a value greater than 1000 in green:

<mx:Script>
    <![CDATA[
        ...        

        // Callback function that hightlights in green
        // all cells with a value greater than or equal to 1000.
        public function myStyleFunc(row:IOLAPAxisPosition, column:IOLAPAxisPosition, 
            value:Number):Object 
        {
            if (value >= 1000) 
            return {color:0x00FF00}; 
                
            // Return null if value is less than 1000.
            return null;      
        }        
     ]]>
</mx:Script>

...

<mx:OLAPDataGrid id="myOLAPDG" 
    width="100%" height="100%"
    styleFunction="myStyleFunc"/>
The executing SWF file for the previous example is shown below:

Using an item renderer with the OLAPDataGrid control

You customize the appearance and behavior of cells in an OLAPDataGrid control by creating custom item renderers. For an introduction to item renderers and item editors, see Using Item Renderers and Item Editors.

To use an item renderer with the OLAPDataGrid control, you assign the item renderer to the OLAPDataGrid control itself, not to a specific column, by using the OLAPDataGrid.itemRendererProviders property. The itemRendererProviders property contains an Array of OLAPDataGridItemRendererProvider instances, where each OLAPDataGridItemRendererProvider instance defines the characteristics for a single item renderer.

You can use the OLAPDataGridRendererProvider.renderer property to assign an item renderer to the OLAPDataGrid control, much in the way that you can by using the AdvancedDataGrid.rendererProviders property, or can use the OLAPDataGridRendererProvider.formatter property to assign a formatter class. The following example modifies the example shown in the section Example using the OLAPDataGrid control to add an item renderer that applies the CurrencyFormatter formatter to each cell in the control:

...
<mx:CurrencyFormatter id="usdFormatter" precision="2" 
    currencySymbol="$" decimalSeparatorFrom="."
    decimalSeparatorTo="." useNegativeSign="true" 
    useThousandsSeparator="true" alignSymbol="left"/>

...

<mx:OLAPDataGrid id="myOLAPDG" 
    width="100%" height="100%">

    <mx:itemRendererProviders>
        <mx:OLAPDataGridItemRendererProvider 
            uniqueName="[QuarterDim].[Quarter]"
            type="{OLAPDataGrid.OLAP_HIERARCHY}"
            formatter="{usdFormatter}"/>
    </mx:itemRendererProviders>
</mx:OLAPDataGrid>
The executing SWF file for the previous example is shown below:

To assign the item renderer, use the uniqueName and type properties of the OLAPDataGridItemRendererProvider class. The uniqueName property specifies the elements of the query, and therefore the corresponding cells of the OLAPDataGrid control, that you modify by using the item renderer. The type properly specifies the element type, such as dimension, hierarchy, or level of the element specified by the uniqueName property.

The function that defines the query for this example is shown below:

// Create the OLAP query.
private function getQuery(cube:IOLAPCube):IOLAPQuery {
    // Create an instance of OLAPQuery to represent the query. 
    var query:OLAPQuery = new OLAPQuery;

    // Get the row axis from the query instance.
    var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
    // Create an OLAPSet instance to configure the axis.
    var productSet:OLAPSet = new OLAPSet;
    // Add the Product to the row to aggregate data 
    // by the Product dimension.
    productSet.addElements(
        cube.findDimension("ProductDim").findAttribute("Product").children);
    // Add the OLAPSet instance to the axis.
    rowQueryAxis.addSet(productSet);

    // Get the column axis from the query instance, and configure it
    // to aggregate the columns by the Quarter dimension. 
    var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);         
    var quarterSet:OLAPSet= new OLAPSet;
    quarterSet.addElements(
        cube.findDimension("QuarterDim").findAttribute("Quarter").children);
    colQueryAxis.addSet(quarterSet);

    return query;       
}

Notice that the axis for the QuarterDim creates a query for the Quarter hierarchy of the QuarterDim dimension. Therefore, you set the uniqueName property to [QuarterDim].[Quarter], and set the type property to OLAPDataGrid.OLAP_HIERARCHY. For more information on the structure of the OLAP code for this example, see Writing a query for a simple OLAP cube.

You can modify this example to drill down through the cube by specifying the query as shown below for the QuarterDim:

quarterSet.addElements(
    cube.findDimension("QuarterDim").findHierarchy("QuarterHier").
    findLevel("Quarter").members);

You therefore modify the uniqueName and type properties as shown below:

<mx:OLAPDataGrid id="myOLAPDG" 
    width="100%" height="100%">

    <mx:itemRendererProviders>
        <mx:OLAPDataGridItemRendererProvider 
            uniqueName="[QuarterDim].[QuarterHier].[Quarter]"
            type="{OLAPDataGrid.OLAP_LEVEL}"
            formatter="{usdFormatter}"/>
    </mx:itemRendererProviders>
</mx:OLAPDataGrid>
The executing SWF file for the previous example is shown below:

Notice in this example that the query for the QuarterDim specifies the dimension, hierarchy, and level of the OLAP cube. Therefore, you modify the uniqueName property to match this structure, and set the type property to OLAPDataGrid.OLAP_LEVEL.

Resolving item renderer conflicts

Each cell in an OLAPDataGrid control is a result of an intersection between the members along a row and the members along a column of the control. However, when you assign an item renderer to an OLAPDataGrid control, you only specify the uniqueName and type properties for one of the dimensions, either row or column. Therefore, you can create a situation where two different item renderers are assigned to the same cell of the control.

In case of a conflict between two or more item renderers, the OLAPDataGrid control applies the item renderer based on the following priorities:

1. type = OLAPDataGrid.OLAP_MEMBER
2. type = OLAPDataGrid.OLAP_LEVEL
3. type = OLAPDataGrid.OLAP_HIERARCHY
4. type = OLAPDataGrid.OLAP_DIMENSION

Therefore, if an item renderer with a type value of OLAPDataGrid.OLAP_LEVEL and an item renderer with a type value of OLAPDataGrid.OLAP_HIERARCHY are applied to the same cell, the OLAPDataGrid control applies the item renderer with a type value of OLAPDataGrid.OLAP_LEVEL.

If two item renderers have the same value for the type property, the OLAPDataGrid control determines which renderer more closely matches the item, and uses it.

Using an item renderer to apply styles to an OLAPDataGrid control

You can use an item renderer to apply styles to specific cells in the OLAPDataGrid control, as the following example shows:

<mx:Style>
    .cellStyle
    {
        color:#ff0000;
        fontWeight:"bold"
    }
</mx:Style>

    ...

<mx:OLAPDataGrid id="myOLAPDG" 
    width="100%" height="100%">

    <mx:itemRendererProviders>
        <mx:OLAPDataGridItemRendererProvider 
            uniqueName="[QuarterDim].[Quarter]"
            type="{OLAPDataGrid.OLAP_HIERARCHY}"
            formatter="{usdFormatter}"
            styleName="cellStyle"/>
    </mx:itemRendererProviders>
</mx:OLAPDataGrid>
The executing SWF file for the previous example is shown below:

In this example, you create a style definition, then apply it to the cells of the OLAPDataGrid control so that it applies to the same cells as the CurrencyFormatter formatter.