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.

6 thoughts on “Creating a Flex DataGrid control with a transparent background

  1. I have a challenge related to the previous example. I’m trying to put the following elements together but:

    – Datagrid
    – alpha
    – alternatingItemColors
    – cornerRadius
    – headerHeight=0

    The problem: The alternatingItemColors overlap the cornerRadius border, really ugly.

    Here is the code used:

    <mx:DataGrid width="100%" id="dgrMyStats" headerHeight="0" dataProvider="{mystats_list}" rowCount="5" alternatingItemColors="[0xFFC526,0xC6981B]" alpha="0.6" cornerRadius="0">
        <mx:columns>
            <mx:DataGridColumn dataField="stat" headerText="Stat" />
            <mx:DataGridColumn dataField="score" headerText="Score" textAlign="right" width="65" />
        </mx:columns>
    </mx:DataGrid>
    

    Any idea?

  2. lluis,

    Which version of the Flex SDK are you using (3, 201 hotfix 2, hotfix 3)?

    I tested in Flex 3 with latest nightly SDK build and Flex 201 hotfix 2 and didnt see any cornerRadius, so I wanted to make sure I was looking at the right thing.

    Peter

  3. How would you make the header background transparent? I’ve been working on this for a couple hours now and I haven’t gotten too far.

  4. Yeap,I know, Thank you . But just they ask: Which version of the Flex SDK are you using (3, 201 hotfix 2, hotfix 3)?

  5. use a 4-byte color: headerColors=”{[0xffffffff,0x7fffffff]}” this would fade from 100% transparent white to half-way transparent white. I don’t thing CSS files accept them, since html notation (i.e. #FFFFFF) does not allow 4-byte colors.

Comments are closed.