alistairphillips.com

One of the requirements for our web-based software at the office was to display reports with fixed headers. Since the holy grail of a cross-browser HTML solution does not yet exist we started looking into Adobe Flex 3 and it's advanced datagrid. Some useful links:

• http://www.adobe.com/devnet/flex/quickstart.html
• http://www.switchonthecode.com/tutorials/simple-datagrid-item-editor-in-flex
• http://learn.adobe.com/wiki/display/Flex/1a.+Learning+Points
• http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html
• http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html
• Resizing columns http://techrays.wordpress.com/2007/08/06/auto-resizable-advanceddatagrid/
• Communication between Flex<-->JS http://www.switchonthecode.com/tutorials/flex-javascript-tutorial-simple-interaction
• http://www.switchonthecode.com/tutorials/flex-snippet-using-flashvars
• http://www.jonnyfunfun.com/2008/11/11/flex-advanceddatagrid-datagrid-optimizicator/
• Using Flex, PHP, and JSON to Modify a MySQL Database
• Loading external data with HTTPService
• ActionScript 3.0 library for several basic utilities
• Styling rows and columns
  • http://stackoverflow.com/questions/1078596/flex-advanced-datagrid-condition-row-background-color
  • http://flexdiary.blogspot.com/2008/06/musings-on-advanceddatagrid-part-2.html
  • http://forums.adobe.com/message/2216721#2216721
• Flex datagrid goodies row colour and others
• http://flexpearls.blogspot.com/2008_02_01_archive.html
• HierarchicalCollectionView and cursors within drawRowBackground
• Advanced Datagrid Topics, a good example of styling and using XML data in an AdvancedDataGrid

The old HTML report that we were display had row highlighting that was applied depending on the contents of the data. In all we were toggling between 3 different styles, something that the AdvancedDataGrid cannot do out of the box. After trying various workarounds what turned out to be a workable solution was to extend the AdvancedDataGrid and override the drawRowBackground method.

The hardest part was getting access to the data in the row, something that needed to be sent across in the call to rowColorFunction(). The solution is to cast your dataProvider (note I had to use this.dataProvider as dataProvider itself was always null) as a HierarchicalCollectionView and then use a cursor over it and seek to the dataIndex value. With that done the object you get back can be accessed like an array, i.e item['first_name'].

RowColorAdvancedDataGrid.as

package
{
    import flash.display.Sprite;
    import mx.collections.CursorBookmark;
    import mx.collections.HierarchicalCollectionView;
    import mx.collections.HierarchicalCollectionViewCursor;
    import mx.controls.AdvancedDataGrid;

    public class RowColorAdvancedDataGrid extends AdvancedDataGrid
    {
        public var rowColorFunction:Function;

        override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
        {
            if ( rowColorFunction != null )
            {
                if ( this.dataProvider )
                {
                    if ( rowIndex < listItems.length )
                    {
                        var dp:HierarchicalCollectionView = this.dataProvider as HierarchicalCollectionView;
                        var cursor:HierarchicalCollectionViewCursor = dp.createCursor() as HierarchicalCollectionViewCursor
                        cursor.seek( CursorBookmark.FIRST, dataIndex );
                        var item:Object = cursor.current;
                        if ( item ) {
                            color = rowColorFunction( item, rowIndex, dataIndex, color );
                        }
                    }
                }
            }

            super.drawRowBackground( s, rowIndex, y, height, color, dataIndex );
        }
    }
}