<?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>

