Changing the appearance of the locked column separator skin for a DataGrid control in Flex 3

The following example shows how you can set the verticalLockedSeparatorSkin style in MXML and ActionScript to control the appearance of the vertical locked separator skin when setting the lockedColumnCount property on a Flex Datagrid control.

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.

Tagged as: lockedColumnCount, verticalGridLines, verticalLockedSeparatorSkin