Customizing the flex datagrid

  This is a slightly advanced tutorial covering a more in depth way to customize the datagrid.  Many of the style properties of the datagrid are protected, or not otherwise accessible.  In order to really customize it, you will need to override specific methods related to the drawing of the component.  Without knowing specifically which ones need to be adjusted, the implementation can be buggy.  I have managed to go through all of the methods in the component line by line to verify which ones need to be modified. Here is a list of key methods, along with their parameters:

drawHeaderBackground(headerBG:UIComponent):void drawRowBackgrounds():void drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

Next, comes the actual override code. I have created an AS file named DrawListingsGrid.as in the pkg/controls/ directory of the project. I have added comments as place holders in the areas where adjustments are made.

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; } }

In order to use this class, you will need to embed it as a custom component in the MXML file.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:con="pkg.controls.*">

Next, you can actually add the component to the stage, by referencing the link from the header:

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