Creating a Flex DataGrid control with a transparent background

The following example demonstrates how you can create a Flex DataGrid control with a transparent background by setting the backgroundAlpha style to 0.0, and the alternatingItemColors style to an empty array.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/creating-a-flex-datagrid-control-with-a-transparent-background/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_creationComplete(evt:Event):void {
                colorPicker.selectedColor = Application.application.getStyle("backgroundColor");
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                Application.application.setStyle("backgroundColor", colorPicker.selectedColor);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="User 1" data="1" />
        <mx:Object label="User 2" data="2" />
        <mx:Object label="User 3" data="3" />
        <mx:Object label="User 4" data="4" />
        <mx:Object label="User 5" data="5" />
        <mx:Object label="User 6" data="6" />
        <mx:Object label="User 7" data="7" />
        <mx:Object label="User 8" data="8" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="backgroundColor:" />
        <mx:ColorPicker id="colorPicker"
                creationComplete="colorPicker_creationComplete(event)"
                change="colorPicker_change(event)" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            backgroundAlpha="0.0"
            alternatingItemColors="{[]}"
            dataProvider="{arr}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="data" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

And just to prove there aren’t any tricks, you can change the main Application’s background color using the ColorPicker control in the upper-left corner.

Tagged as: alternatingItemColors, backgroundAlpha