Monday, January 10, 2011

AS3 DataGrid component: Part 7

Today we'll learn how to make alternating background colors for rows in a data grid.

Like shown here:


First, we apply the cellrenderer of the whole datagrid to a custom cell renderer class called alterCellRenderer:

myGrid.setStyle("cellRenderer", alterCellRenderer);

Now create the alterCellRenderer.as document.

The CellRenderer class has a function called drawBackground(); which handles drawing the background. We will override it and add our own stuff inside. For example, we can set the "upSkin" (the appearance of the cell when not rolled over) style to CellRenderer_overSkin. This is located in your library by default (as long as you have datagrid in your library) with all the other built-in styles.

package 
{

import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;

public class alterCellRenderer extends CellRenderer
{
private var tf:TextFormat;

public function alterCellRenderer()
{
}

override protected function drawBackground():void
{
setStyle("upSkin", CellRenderer_overSkin);
super.drawBackground();
}

}
}

Now all the rows are blue-ish. We don't really want that, but we're getting closer to our goal. We now know how to change the style of a cell, so let's create our own upSkin-type movieclip.

Go to your library, open the Component Assets folder, open the CellRenderer Skins, right click on the CellRenderer_upSkin movieclip and select Duplicate. Call the new movieclip CellRenderer_upSkin2 and make sure the "Export for actionscript" box is checked. Make its class path also CellRenderer_upSkin2.

Then open this movieclip and change its color to whatever you like.

Now, in our alterCellRenderer class, we can check the numeric position of the current cell (_listData.index) and see if it can be divided by 2. If it can, apply the new skin to it.

package 
{

import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;

public class alterCellRenderer extends CellRenderer
{
private var tf:TextFormat;

public function alterCellRenderer()
{
}

override protected function drawBackground():void
{
setStyle("upSkin", CellRenderer_upSkin);
if(_listData.index % 2 == 0){
setStyle("upSkin", CellRenderer_upSkin2);
}
super.drawBackground();
}

}
}

And there you have it!

Thanks for reading!

Related:

AS3 DataGrid component: Part 1
AS3 DataGrid component: Part 2
AS3 DataGrid component: Part 3
AS3 DataGrid component: Part 4
AS3 DataGrid component: Part 5
AS3 DataGrid component: Part 6
AS3 DataGrid component: Part 8
AS3 DataGrid component: Part 9
AS3 DataGrid component: Part 10
AS3 DataGrid component: Part 11
AS3 DataGrid component: Part 12
AS3 DataGrid component: Part 13
AS3 DataGrid component: Part 14
AS3 DataGrid component: Part 15
AS3 DataGrid component: Part 16

10 comments:

chrispower said...

Been working through parts 1-7, very good lessons. I noticed on part 7 (alternating background colors) when sorting on any of the
headers the Name column is gets filled with the
alternative color. Am I doing something wrong?

Kirill Poletaev said...

Oh, it seems you are right. I'll try to make a fix for this.

Kirill Poletaev said...

There you go, just change the drawBackground function to:

override protected function drawBackground():void
{
setStyle("upSkin", CellRenderer_upSkin);
if (_listData.index % 2 == 0)
{
setStyle("upSkin", CellRenderer_upSkin2);
}
super.drawBackground();
}

chrispower said...

Thanks, that works. I was trying to find a solution but need more AS3 time.

M Smith said...

Okay this is killin me.

I have the same exact code (almost) that you do except the class is named crAlter. My grid does not error out, however the rows are still white.

I am calling the style like this:
dg_hubs.setStyle("cellRenderer", crAlter);

My as file is called crAlter.as and I am importing it as:
import crAlter;

What am I doing wrong?

Kirill Poletaev said...

What happens if you use the exact same code with the same names and everything?

You might've missed an unchanged alterCellRenderer in the code...

Celo said...

is there any way the datagrid can change the bg color of a cell with a click of a mouse? thx in advance.

Anonymous said...

http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html#articlecontentAdobe_numberedheader_1

Mara Ares said...

Hi! Thanks, is great! I think I've just find a bug.

When it says:
setStyle("upSkin", CellRenderer_upSkin2);

You need to change to:
setStyle("upSkin", CellRenderer_overSkin);

Otherwise, is not working for me. (I am working on adobe AIR).

Kirill Poletaev said...

It's not a bug, I explained in the tutorial that CellRenderer_upSkin2 is a new asset we create ourself and explained how to create it.

Post a Comment