Alternating background colors in a Flash data grid (ActionScript 3.0 edition)

Somebody was asking me today how to alternate background colors for the DataGrid component in Flash CS3 today (using the new ActionScript 3.0 components). Well, as luck has it, I wrote a section on it in an upcoming Flash Quick Start for the DataGrid component (my third and final installment on DataGrid).

The wording/code may change, but here’s the latest draft of the “Alternating background colors in a data grid” section. Oh, and don’t worry, the formatting will be *much* better once the Developer Center people clean it up.


Alternating background colors in a data gridOften when displaying large amounts of data in a data grid, it is easier to see the rows when they have alternating row colors. In order for the following example to work, you need to create two new symbols in the Flash document’s library. The easiest way to do this is to duplicate an existing cell renderer skin in the library (such as CellRenderer_upSkin in the Library panel’s Component Assets/CellRendererSkins folder, see figure 1) and modify the asset as desired. Once you’ve finished creating the desired skins for the alternating row color backgrounds, you’ll need to set up a linkage and give the symbol a class name of “CellRenderer_upSkinGray” and “CellRenderer_upskinDarkGray”.figure1.jpgFigure 1. The CellRenderer_upSkin symbol in the Flash document’s Library panel.Once both the CellRenderer_upSkinDarkGray and CellRenderer_upSkinGray assets have been created, right-click the CellRenderer_upSkinDarkGray asset in the Library panel and select Linkage to open the Linkage Properties dialog box. From this dialog box, click the Export for ActionScript check box, assign a class name of CellRenderer_upSkinDarkGray and leave the base class text field as flash.display.MovieClip. Click OK. Repeat these steps for the CellRenderer_upSkinGray asset, giving it a class name of CellRenderer_upSkinGray (see figure 2).figure2.jpgFigure 2. Setting the class name for the CellRenderer_upSkinGray asset in the library.ExampleThe following example creates ten items in a data grid and alternates the data grid row’s background colors based on the row’s current index:

// 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});dp.addItem({label:"Item b", data:1});dp.addItem({label:"Item c", data:2});dp.addItem({label:"Item d", data:3});dp.addItem({label:"Item e", data:4});dp.addItem({label:"Item f", data:5});dp.addItem({label:"Item g", data:6});dp.addItem({label:"Item h", data:7});dp.addItem({label:"Item i", data:8});dp.addItem({label:"Item j", data:9});/* Create a new DataGrid component instance, add two data grid columns,define the data provider and add the instance to the display list. Thiscode also sets the cellRenderer style on the data grid by using thesetStyle() 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", AlternatingRowColors);addChild(myDataGrid);

The AlternatingRowColors 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 index in a list.* 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 AlternatingRowColors extends CellRenderer implements ICellRenderer {/*** Constructor.*/public function AlternatingRowColors():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 current index. For example, if the row index is an* odd number, the upSkin style is set to the CellRenderer_upSkinDarkGray linkage in the* library. If the row index is an even number, the upSkin style is set to the* CellRenderer_upSkinGray linkage in the library.*/override protected function drawBackground():void {if (_listData.index % 2 == 0) {setStyle("upSkin", CellRenderer_upSkinGray);} else {setStyle("upSkin", CellRenderer_upSkinDarkGray);}super.drawBackground();}}}

Save the previous code in the same directory as your Flash document and give it a filename of AlternatingRowColors.as.The custom AlternatingRowColors class extends the CellRenderer class and implements the ICellRenderer interface. This class overrides the drawBackground() method from the CellRenderer class and determines which upSkin to use for the current data grid row’s background based on the current row’s index. If the row index is an even number, the data grid sets the upSkin style to CellRender_upSkinGray, otherwise the CellRenderer_upSkinDarkGray is used.Note: The alternating background skins are applied using the setStyle() method in the drawBackground() method in the custom cell renderer above. For this example to work you need to create two new skins in your library and make sure they are exported for ActionScript: CellRenderer_upSkinGray and CellRenderer_upSkinDarkGray.

8 Responses to Alternating background colors in a Flash data grid (ActionScript 3.0 edition)

  1. Peter says:

    You can download the source code for the above jumble athttp://blogs.adobe.com/pdehaan/code/section12.example1.zip

  2. Peter says:

    Check out the next entry, “Setting a Flash data grid’s background color based on a row’s data (ActionScript 3.0 edition)” at http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html for an example of setting a row’s background color/skin based on the data in the data grid.

  3. Great post! I am able to use this example to make a datagrid render with alternating colors when my app starts up. But, now I would like to change the background color of an individual row on a click event. I’ve tried several approaches, but am still left wondering. Any help would be much appreciated!

  4. Oscar says:

    How would I change the row background color of a newly added row to an existing datagrid. In my case, i am trying to add a new entry into a datagrid, and would like to base the background color of the new row on a user selected value. i.e. if the user is of type A background is blue, type B background is green, etc.

  5. Peter says:

    The full article has been posted on the Adobe Flash Developer Center and you can check it out at:http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3/

  6. Wow ! ! ! These are the kind of tips great applications are made of. These are usually shared in-house by enterprise experts.Thanks for sharing

  7. Aqquoz says:

    Hi peter, help me,….,Could you put checkbox in datagrid with AS3.0?How is it? thanx…

  8. harish kanzariya says:

    hi peterpls datagrid in cs3what use ? pls ask me