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.