Customizing Spark DataGrid row and column separators

In Flex 4.5, we introduced the Spark version of DataGrid, which provides a vastly improved skinning experience. Spark DataGrid has a multitude of skin parts that can be customized and tweaked through its skin. These include the row backgrounds, row separators, column separators, selection indicators, caret indicator, hover indicator, etc… (see DataGrid Documentation). This post demonstrates two methods for customizing the row and column separators.

In general, the row and column separators are factory skin parts that are dynamically created as the DataGrid is laid out on the screen. The separators are always laid out from one end of the visible grid to the other. They are also overlaid above most of the other skin parts (caretIndicator is the exception).

Method 1
If you only want to customize the skin parts of the DataGrid without doing additional tweaking in the skin, the easiest method is to replace the default skin parts with a subclass of the skin. You do this by creating a custom MXML component using the default DataGridSkin and creating component classes with the id’s of “rowSeparator” and “columnSeparator” in the <fx:Declarations> section. These will essentially override the original separator definitions in the super class (the DataGridSkin). Make sure to include the “skins” namespace: “spark.skins.spark.*”. Also remember that you should only add components and component definitions to the <fx:Declarations> section. Adding components as children of this skin will remove all of the children that were inherited from DataGridSkin.

Below is an example skin (in the source, this is DGSkin1.mxml) where I’ve changed the color of the separators:

<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:skins="spark.skins.spark.*">
 
    <fx:Declarations>
 
        <!-- One can also use an empty Rect to essentially remove the separator
             (e.g. <s:Rect />)
        -->
 
        <fx:Component id="columnSeparator">
            <s:Line>
                <s:stroke>
                    <s:SolidColorStroke color="0x440000" weight="1" caps="square"/>
                </s:stroke>
            </s:Line>
        </fx:Component>
 
        <fx:Component id="rowSeparator">
            <s:Line>
                <s:stroke>
                    <s:SolidColorStroke color="0x440000" weight="1" caps="square"/>
                </s:stroke>
            </s:Line>
        </fx:Component>
 
    </fx:Declarations>
 
</skins:DataGridSkin>

Method 2
The standard workflow for customizing the skin of any Spark component is make a copy of the default skin and edit it. So, the second method is to make a copy of the default DataGridSkin and customize the separators in the copied skin. To customize them, just look for the component definitions with id’s “rowSeparator” and “columnSeparator”. To remove them, you can just delete these definitions from the copied skin.

Here is a running example of both methods in action:

View Source

Note: This sample requires Flex SDK 4.5.1 or higher. You can get the latest SDK builds from opensource.adobe.com.

One thought on “Customizing Spark DataGrid row and column separators”

  1. We can use a single skin class instead of 2 classes (x Number of colors)
    We procede like follow:
    on class DGSkin, we change

    into

    We create a setter and a getter for the defined variable “separatorColor”(on the <s:Script area).
    Then, on method updateDisplayList:
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
    separatorColor = getStyle("separatorColor");
    [or]
    separatorColor = hostComponent.getSeparatorColor
    }

Comments are closed.