Styling the Flex DataGrid control using a custom separator skins

The following example demonstrates how you can customize the Flex 3 DataGrid control by specifying a custom skin for the horizontalSeparatorSkin and verticalSeparatorSkin styles.

These styles were added in Flex 3 and will not work with Flex 2.0.1.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-the-flex-datagrid-control-using-a-custom-separator-skins/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="./assets/redbluebar.gif")]
            private var RedBlueBar:Class;

            [Bindable]
            [Embed(source="./assets/greencircle.png")]
            private var GreenCircle:Class;
        ]]>
    </mx:Script>

    <mx:Style>
        .centered {
            fontWeight: bold;
            textAlign: center;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object country="USA"
                gold="35"
                silver="39"
                bronze="29" />
        <mx:Object country="China"
                gold="32"
                silver="17"
                bronze="14" />
        <mx:Object country="Russia"
                gold="27"
                silver="27"
                bronze="38" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="hGridLines"
                label="horizontalGridLines"
                selected="true" />

        <mx:Spacer width="50" />

        <mx:CheckBox id="vGridLines"
                label="verticalGridLines"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            headerStyleName="centered"
            headerSeparatorSkin="{GreenCircle}"
            horizontalSeparatorSkin="{RedBlueBar}"
            horizontalGridLines="{hGridLines.selected}"
            verticalSeparatorSkin="{RedBlueBar}"
            verticalGridLines="{vGridLines.selected}">
        <mx:columns>
            <mx:DataGridColumn dataField="country"
                    headerText="Country:"
                    textAlign="left" />
            <mx:DataGridColumn dataField="gold"
                    headerText="Gold:"
                    textAlign="right" />
            <mx:DataGridColumn dataField="silver"
                    headerText="Silver:"
                    textAlign="right" />
            <mx:DataGridColumn dataField="bronze"
                    headerText="Bronze:"
                    textAlign="right" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

The “redbluebar.gif” asset in the above example is a simple 10 pixel wide by 2 pixel high GIF which gets stretched horizontally to fit the width of the data grid (when used as a horizontal separator skin). The same asset was used as a vertical separator skin in which case it gets stretched vertically to match the data grid’s height). It is very important to note that the skin asset is stretched and not tiled/repeated. Secondly, the “greencircle.png” asset in the above example is a 10 pixel by 10 pixel green circle with a transparent background. It also gets stretched vertically to match the current height of the data grid’s header (as specified by the headerHeight property).

Not the prettiest of samples, I know. But you can view the full source code by right-clicking in the SWF above and downloading all the code/assets.

If all you want to do is change the color of the DataGrid control’s horizontal and vertical lines, you can use the horizontalGridLineColor and verticalGridLineColor styles, which also work in Flex 2.0.1. For more information, see “Toggling a DataGrid control’s horizontal grid lines and vertical grid lines”.