I feel like I’m really behind in the loop here using Flash 8 components over the new, supposedly easy-to-use Flex components, but I figured I’d share this little tidbit, since it was nearly impossible to find online.

If you’ve ever worked with Flash’s built-in DataGrid component, you’ll quickly discover how difficult it is to customize: there’s theme files to edit, there’s styling, and there’s classes (such as RectBorder). Unfortunately, none of them helped me to set the background of the DataGrid component to transparent.

The closest solution I found was on FlashGamer, but I soon found that any buttons or MovieClips being placed into my DataGrid via the cellRenderer API were being set to transparent as well. So, I spent some time figuring out how FlashGamer apparently figured it out:

I went through the class files in the Flash 8 Application/First Run/classes/mx/controls/DataGrid.as to discover that Flash was using the drawing API to generate the background (I could have fixed it here, but didn’t want to do anything questionable in the eyes of the license agreement).

Then, I published an SWF and checked out Debug > List Objects to see the MovieClip structure of the DataGrid. What I found I wanted to hide was my _dg.content_mc["listRow"+i].bG_mc. Like FlashGamer, I discovered that it takes about half a second to render the DataGrid (I’d test based on amount of data, though), and, oddly enough, the rows started at 10. So, I reused the while() loop generously offered, but rather than use a custom frame-based timer class, I used the undocumented global setTimeout() method (for documentation, check out FlashGuru’s setTimeout() post).

So, to set your DataGrid background to transparent, pull a DataGrid component onto the stage and name it “my_dg” and place this code on frame 1 of the _root:

import mx.controls.DataGrid;

//Create a dataProvider to add some data to the Datagrid
var data_array:Array = new Array();
data_array.push({Model:"Ford", Year:0});
data_array.push({Model:"Dodge", Year:1});
data_array.push({Model:"BMW", Year:2});
my_dg.dataProvider = data_array;

// set border_mc to transparent
my_dg.border_mc._alpha = 0;
/**
* Hides background of DataGrid.
*/
function hideBgd():Void {
trace("hideBgd")
var i:Number = 10;
while (my_dg.content_mc["listRow"+i] != undefined) {
my_dg.content_mc["listRow"+i].bG_mc._alpha = 0;
i++;
}
}
// call hideBgd in half a second
setTimeout(hideBgd, 500);

Hopefully, this’ll save someone the time I took looking around.

This entry was posted on Tuesday, January 30th, 2007 at 4:57 pm and is filed under ActionScript, Flash, webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.