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.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/15/locking-columns-in-a-horizontally-scrolling-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DataGrid id="dataGrid"
            lockedColumnCount="1"
            horizontalScrollPolicy="on"
            width="300">
        <mx:columns>
            <mx:DataGridColumn dataField="@name" headerText="Name:" />
            <mx:DataGridColumn dataField="@colA" headerText="Column A:" />
            <mx:DataGridColumn dataField="@colB" headerText="Column B:" />
            <mx:DataGridColumn dataField="@colC" headerText="Column C:" />
        </mx:columns>
        <mx:dataProvider>
            <mx:XMLList>
                <item name="User 1" colA="1.A" colB="1.B" colC="1.C" />
                <item name="User 2" colA="2.A" colB="2.B" colC="2.C" />
                <item name="User 3" colA="3.A" colB="3.B" colC="3.C" />
                <item name="User 4" colA="4.A" colB="4.B" colC="4.C" />
                <item name="User 5" colA="5.A" colB="5.B" colC="5.C" />
                <item name="User 6" colA="6.A" colB="6.B" colC="6.C" />
                <item name="User 7" colA="7.A" colB="7.B" colC="7.C" />
                <item name="User 8" colA="8.A" colB="8.B" colC="8.C" />
            </mx:XMLList>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.