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 dataWhen 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. 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", 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 isset 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.

12 Responses to Setting a Flash data grid’s background color based on a row’s data (ActionScript 3.0 edition)

  1. Peter says:

    You can download the source code for the previous jumble at:http://blogs.adobe.com/pdehaan/code/section13.example1.zip

  2. CH says:

    Hi, i have meet a problem with using datagrid, i wish to get some help from you. Does Flash 8 datagrid able to customize individual cell without clicking on it?

  3. Peter says:

    CH,I haven’t worked with the ActionScript 2.0 classes in quite a while, but maybe this will give you a start… I wasn’t able to find out how to easily change a single cell, but there is a setPropertiesAt() method (which I believe is inherited from the List class) which may help. See the component language reference at http://livedocs.adobe.com/flash/9.0/main/00003195.html for more details.Another good resource I visit regularly is PhilFlash, http://philflash.inway.fr/example.html, which has some outstanding examples of using DataGrids with custom renderers, and all sorts of interesting samples/snippets. The site is in French, but I usually use Google to translate, or just play with the code.Hope that helps,Peter deHaanPS: The simple example below creates a bunch of dummy data for a data grid, and then highlights each row where a value is below a certain limit:[ActionScript 2.0]// Needs a DataGrid on the Stage with an instance name of ‘dg’.// All positioning and sizing will be done using ActionScript.// create data provider arrayvar i:Number;var arr:Array = [];for (i=1; i<=10; i++) {arr.push({name:”User ” + i, id:i, uuid:Math.random()}); }dg.setSize(320, 240); // size itdg.move(10, 10); // move itdg.addColumn(“id”);dg.addColumn(“name”);dg.addColumn(“uuid”);dg.dataProvider = arr; // set data provider dg.doLater(this, “resizer”); // resize the columns later onfor (i = 0; i < dg.dataProvider.length; i++) {if (dg.getItemAt(i).uuid < 0.5) {dg.setPropertiesAt(i, {backgroundColor:0xFF0000});}}function resizer():Void {dg.spaceColumnsEqually();}[/ActionScript 2.0]

  4. 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/

  5. mangesh kulkarni says:

    can we remove the light green color that appears when we select the datagrid row?

  6. Vivek Lakhanpal says:

    Hi Peter,Thanks for such a nice article on DataGrid, I have been greatly benefited from these articles of yours. Actually i have been referred to your articles by Paul Robertson your co-worker.I was facing a problem of pushing movie clip into dataGrid.Now the customization i was trying to do to that example is putting in 4 clips in a single row. But it’s not working. i.e. It only picks up single data column or whatever name i supply to pick using value.data or value.(whatever name i supply to one column). How can i pick it up multiple cells in single row?The dumb way which i tried is having different class for each different column.I am a bit new to this concept of classes in AS/FlashThanks & Regards,Vivek Lakhanpal.

  7. Alkot says:

    I know this how-to is a bit old, sorry :| .I’ve read the how-tos from Adobe but none solves my problem.The first part of the problem is that I would like to insert buttons (Button Class) as a CellRenderer for a column with a toggle mode enabled for the buttons, selected or not according to the data from the DataProvider.I’ve already noticed the conflict between the ‘_selected’ properties, which does not occure with UILoader …The second one is I would like to set the label of those buttons with the DataProvider AND if the button is toggled or not from the data of the provider.How could 2 values interact on only one column of the DataGrid ?Thanks for your attention.Hope reading from you soon.

  8. Aaron says:

    Hi All,Has anyone experienced a problem where information won’t display in a datagrid on safari & internet explorer 7 but will work with firefox and internet explorer 6? I have a playlist for an mp3 player on http://www.eargasment.com and the above problem is happening.

  9. chris dennett says:

    Hello,Thanks for the post. I’m just getting to grips with the datagrid and slowing working it into what I need. I’ve only really got one problem left – how to get different sized rows depending on the text inside.I’d really appreciate any help you could offer.Thanks againChris

  10. Dan says:

    Thank you very much Peter, you suggestions and code have helped me immensely!

  11. Kenneth Leong says:

    Hi, this is great stuff. But i was wondering if it’s possible to change the color when a cell have been edited. I know about the editing events, and i can change the cell color when it’s been edited, but since datagrid scrolling recycles cells, that cell that have its color changed won’t be the same cell when you scroll down. Is there like a custom attribute of a cell so i can use to change the cell color base on that?Thanks!