Changing the appearance of the locked column separator skin for a DataGrid control in Flex 3
Problem
You want to change the appearance of the vertical locked separator on a horizontally scrolling DataGrid control with locked columns in Flex 3.
Solution
You can set the new verticalLockedSeparatorSkin style on the Flex 3 DataGrid and specify an embedded asset from a SWF file or external image.
Detailed explanation
The following example shows how you can set the Flex 3 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.
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="redVBar.png")]
private var redVBar:Class;
]]>
</mx:Script>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
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>
You can also embed the asset inline, as shown in the following snipet:
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
verticalLockedSeparatorSkin="@Embed(source='redVBar.png')"
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>
Or, you can set the verticalLockedSeparatorSkin style using ActionScript, as shown in the following snippet:
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="redVBar.png")]
private var redVBar:Class;
private function init():void {
dataGrid.setStyle("verticalLockedSeparatorSkin", redVBar);
}
]]>
</mx:Script>
Finally, you can set the verticalLockedSeparatorSkin style in an external .CSS file or <mx:Style /> block, as shown in the following snippet:
<mx:Style>
DataGrid {
verticalLockedSeparatorSkin: Embed(source="redVBar.png");
}
</mx:Style>
For more information, see my blog post.
