Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/05/changing-the-appearance-of-the-locked-column-separator-skin-for-a-datagrid-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            [Bindable]
            [Embed(source="assets.swf#BlankBar")]
            private var blankBar:Class;

            [Bindable]
            [Embed(source="assets.swf#RedVBar")]
            private var redVBar:Class;

            [Bindable]
            [Embed(source="assets.swf#GreyVBar")]
            private var greyVBar:Class;

            private function setVLockedSeparatorSkin(skin:Class):void {
                dataGrid.setStyle("verticalLockedSeparatorSkin", skin);
            }

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                setVLockedSeparatorSkin(evt.item.data);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object c1="1a" c2="1b" c3="1c" c4="1d" c5="1e" />
                <mx:Object c1="2a" c2="2b" c3="2c" c4="2d" c5="2e" />
                <mx:Object c1="3a" c2="3b" c3="3c" c4="3d" c5="3e" />
                <mx:Object c1="4a" c2="4b" c3="4c" c4="4d" c5="4e" />
                <mx:Object c1="5a" c2="5b" c3="5c" c4="5d" c5="5e" />
                <mx:Object c1="6a" c2="6b" c3="6c" c4="6d" c5="6e" />
                <mx:Object c1="7a" c2="7b" c3="7c" c4="7d" c5="7e" />
                <mx:Object c1="8a" c2="8b" c3="8c" c4="8d" c5="8e" />
                <mx:Object c1="9a" c2="9b" c3="9c" c4="9d" c5="9e" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Array id="arr">
        <mx:Object label="undefined (default)" data="{undefined}" />
        <mx:Object label="red (0xFF0000)" data="{redVBar}" />
        <mx:Object label="grey (0xCCCCCC)" data="{greyVBar}" />
        <mx:Object label="blank" data="{blankBar}" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{arr}"
                selectedIndex="1"
                itemClick="toggleButtonBar_itemClick(event);" />

        <mx:Spacer width="100%" />

        <mx:CheckBox id="checkBox"
                label="verticalGridLines:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            verticalGridLines="{checkBox.selected}"
            verticalLockedSeparatorSkin="{redVBar}"
            width="320"
            rowCount="6"
            lockedColumnCount="1">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
            <mx:DataGridColumn dataField="c3" />
            <mx:DataGridColumn dataField="c4" />
            <mx:DataGridColumn dataField="c5" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 

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”.

 

Full code after the jump.

The following example sets the horizontal and vertical grid lines to red, disables the alternatingItemColors style by setting it to white, and controls the horizontalGridLines and verticalGridLines styles by using two CheckBox controls:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/23/toggling-a-datagrid-controls-horizontal-grid-lines-and-vertical-grid-lines/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:ArrayCollection id="arrColl" source="{arr}" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            alternatingItemColors="[white]"
            rowCount="6"
            horizontalGridLines="{hGL.selected}"
            verticalGridLines="{vGL.selected}"
            horizontalGridLineColor="red"
            verticalGridLineColor="red">
        <mx:columns>
            <mx:DataGridColumn id="labelCol" dataField="label" />
            <mx:DataGridColumn id="dataCol" dataField="data" />
        </mx:columns>
    </mx:DataGrid>

    <mx:CheckBox id="hGL" label="horizontalGridLines" selected="true" />
    <mx:CheckBox id="vGL" label="verticalGridLines" selected="true" />

</mx:Application>

View source is enabled in the following example.