[Flex Labs] Customizing the flex datagrid

package pkg.controls
{

import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.*;

import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EdgeMetrics;
import mx.core.mx_internal;
import mx.core.FlexSprite;
import mx.core.FlexShape;
import mx.core.UIComponent;
import flash.display.BitmapData;
import mx.core.BitmapAsset;
import mx.controls.Image;
import mx.styles.StyleManager;

use namespace mx_internal;

public class DrawListingsGrid extends DataGrid
{

// embedding an image for the row background
[Embed(source="../assets/datagrid_row_bg.jpg")]
[Bindable]
public var rowbgCls:Class;

// embedding an image for the header background
[Embed(source="../assets/datagrid_header_bg.jpg")]
[Bindable]
public var imgCls:Class;

private var displayWidth:Number;

override protected function drawHeaderBackground(headerBG:UIComponent):void
{
var g:Graphics = headerBG.graphics;
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
g.clear();

var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);
maskShape.width = adjustedWidth;

var hh:Number = rowInfo.length ? rowInfo[0].height : headerHeight;

var vdistance:int;
var vstart:int;
var vstartOffset:int;
var vdistanceOffset:int;

// filling in header with embedded background image
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(adjustedWidth, 0);
g.lineTo(adjustedWidth, hh);
g.lineTo(0, hh);
g.lineStyle(0, 0x000000, 0);
g.endFill();
}

override protected function drawRowBackgrounds():void
{
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
var rowBGs:Sprite = Sprite(listContent.getChildByName("rowBGs"));
if (!rowBGs)
{
rowBGs = new FlexSprite();
rowBGs.mouseEnabled = false;
rowBGs.name = "rowBGs";
listContent.addChildAt(rowBGs, 0);
}

var colors:Array;

colors = getStyle("alternatingItemColors");

if (!colors || colors.length == 0)
return;

var curRow:int = 0;
curRow++;

var i:int = 0;
var actualRow:int = verticalScrollPosition;
var n:int = listItems.length;

while (curRow < n)
{
drawRowBackground(rowBGs, i++, rowInfo[curRow].y, rowInfo[curRow].height, colors[actualRow % colors.length], actualRow);
curRow++;
actualRow++;
}

while (rowBGs.numChildren > i)
{
rowBGs.removeChildAt(rowBGs.numChildren - 1);
}
}

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {

var background:Shape;
if (rowIndex < s.numChildren)
{
background = Shape(s.getChildAt(rowIndex));
}
else
{
background = new FlexShape();
background.name = "background";
s.addChild(background);
}

background.y = y;

var height:Number = Math.min(height, listContent.height - y);
var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);

//fill the row background with the embedded image
var imgObj:BitmapAsset = new rowbgCls() as BitmapAsset;

var g:Graphics = background.graphics;
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(displayWidth, 0);
g.lineTo(displayWidth, height);
g.lineTo(0, height);
g.lineStyle(0, 0x000000, 0);
g.endFill();

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
}

<con:DrawListingsGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column1"/>
<mx:DataGridColumn headerText="Column2"/>
</mx:columns>
</con:DrawListingsGrid>