Implementing row and column styling in the AdvancedDataGrid control
Problem
To easily implement row and column styling in the AdvancedDataGrid control
Solution
AdvancedDataGrid supports styling of rows and columns using the styleFunction property and specifying a callback function unlike the case of a DataGrid, where you need to implement itemRenderers to achieve this.
Detailed explanation
STYLING ROWS
To control the styling of a row, we have to use the styleFunction property on the AdvancedDataGrid control as below:
<mx:AdvancedDataGrid id="myADG" styleFunction="myRowStyleFunction">
The callback function must
have the following signature:
public function myStyleFunction(data:Object, column:AdvancedDataGridColumn):Object
The callback function returns an Object which specifies the
styles in styleName:value pairs or a
null value. The styleName field contains the name of a style property and the
value field contains the value for that style property. You could return two
styles using the following code:
{color:0xFF0000, fontWeight:"bold"}
STYLING COLUMNS
To control the styling of a column, we have to use the same property, but on the AdvancedDataGrid column instead of the AdvancedDataGrid control itself as below:
<mx:AdvancedDataGridColumn headerText="Price" dataField="price" styleFunction="myColumnStyleFunction"/>
It is important to note that the AdvancedDataGrid control invokes the callback function for itself first and then for the columns. So the styles apply to rows first, and then to the columns.
