Setting a Flash data grid's background color based on a row's data (ActionScript 3.0 edition)
Hot on the heels of the previous post... Here is another section of the third [and final] quick start on the Flash ActionScript 3.0 DataGrid component.
In this section we cover setting a row's background color/skin based on the row's data. And again I apologize for what will most certainly be hard to read formatting.
Setting background color based on a row's data
When customizing the layout of a data grid, you may not always want row colors to be alternated based on their row index. In some cases, you may want to set a row's background color based on the value of a field, or on a certain set of criteria.
The following example first creates a DataGrid component instance and alternates row colors based on the value of the value of the data provider's rowColor property.
Note: The alternating background skins are applied using the setStyle() method in the drawBackground() method in the CustomRowColors class below. For this example to work you need to create two new skins in your library and make sure they are exported for ActionScript: CellRenderer_upSkinGreen and CellRenderer_upSkinRed. For more information, see the previous example, Alternating background colors in a data grid.
Example
// Import the required component classes.
import fl.controls.DataGrid;
import fl.data.DataProvider;// Create and populate a new DataProvider object.
var dp:DataProvider = new DataProvider();
dp.addItem({label:"Item a", data:0, rowColor:"green"});
dp.addItem({label:"Item b", data:1, rowColor:"green"});
dp.addItem({label:"Item c", data:2, rowColor:"green"});
dp.addItem({label:"Item d", data:3, rowColor:"green"});
dp.addItem({label:"Item e", data:4, rowColor:"red"});
dp.addItem({label:"Item f", data:5, rowColor:"red"});
dp.addItem({label:"Item g", data:6, rowColor:"green"});
dp.addItem({label:"Item h", data:7, rowColor:"red"});
dp.addItem({label:"Item i", data:8, rowColor:"green"});
dp.addItem({label:"Item j", data:9, rowColor:"green"});/* Create a new DataGrid component instance, add two data grid columns,
define the data provider and add the instance to the display list. This
code also sets the cellRenderer style on the data grid by using the
setStyle() method and specifies the custom cell renderer class to use. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("label");
myDataGrid.addColumn("data");
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length;
myDataGrid.move(10, 10);
myDataGrid.setStyle("cellRenderer", CustomRowColors);
addChild(myDataGrid);
The CustomRowColors class is as follows:
package {
// Import the required component classes.
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;/**
* This class sets the upSkin style based on the current item's rowColor value
* in the data provider.
* Make sure the class is marked "public" and in the case of our custom cell renderer,
* extends the CellRenderer class and implements the ICellRenderer interface.
*/
public class CustomRowColors extends CellRenderer implements ICellRenderer {/**
* Constructor.
*/
public function CustomRowColors():void {
super();
}/**
* This method returns the style definition object from the CellRenderer class.
*/
public static function getStyleDefinition():Object {
return CellRenderer.getStyleDefinition();
}/**
* This method overrides the inherited drawBackground() method and sets the renderer's
* upSkin style based on the row's rowColor value in the data provider. For example,
* if the item's rowColor value is "green", the upSkin style is set to the
* CellRenderer_upSkinGreen linkage in the library. If the rowColor value is "red", the
* upSkin style is set to the CellRenderer_upSkinRed linkage in the library.
*/
override protected function drawBackground():void {
switch (data.rowColor) {
case "green" :
setStyle("upSkin", CellRenderer_upSkinGreen);
break;
case "red" :
setStyle("upSkin", CellRenderer_upSkinRed);
break;
default :
break;
}
super.drawBackground();
}
}
}
The drawBackground() method above checks the value of the current row's rowColor property and depending on the value, selects either the CellRenderer_upSkinGreen or CellRenderer_upSkinRed asset from the library.
If you wanted to select a skin style based on the value of the row's data property, you could use code similar to the following:
override protected function drawBackground():void {
/* If the data property in the data provider is less than 4, set the upSkin style is
set to the CellRenderer_upSkinRed linkage in the library. */
if (data.data < 4) {
setStyle("upSkin", CellRenderer_upSkinRed);
}
super.drawBackground();
}
If the value of the row's data property is less than 4, the row's upSkin will be set to CellRenderer_upSkinRed, otherwise the default skin will be used.
