Removing the header separator on the DataGrid control in Flex

The following example shows how you can remove the header separator skin on the Flex DataGrid control by setting the headerSeparatorSkin style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerSeparatorSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">

    <mx:DataGrid id="dataGrid"
            headerSeparatorSkin="mx.skins.ProgrammaticSkin">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
                <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
                <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
                <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
                <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
                <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

You can also set the headerSeparatorSkin style in an external .CSS file or <Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerSeparatorSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">

    <mx:Style>
        DataGrid {
            headerSeparatorSkin: ClassReference("mx.skins.ProgrammaticSkin");
        }
    </mx:Style>

    <mx:DataGrid id="dataGrid">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
                <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
                <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
                <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
                <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
                <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

Or, you can set the headerSeparatorSkin style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/20/removing-the-header-separator-on-the-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_headerSeparatorSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.skins.ProgrammaticSkin;

            private function btn_click(evt:MouseEvent):void {
                dataGrid.setStyle("headerSeparatorSkin", ProgrammaticSkin);
            }
        ]]>
    </mx:Script>

    <mx:Button id="btn"
            label="Set header separator skin"
            click="btn_click(event);" />

    <mx:DataGrid id="dataGrid">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="1. One" c2="1. Two" c3="1. Three" />
                <mx:Object c1="2. One" c2="2. Two" c3="2. Three" />
                <mx:Object c1="3. One" c2="3. Two" c3="3. Three" />
                <mx:Object c1="4. One" c2="4. Two" c3="4. Three" />
                <mx:Object c1="5. One" c2="5. Two" c3="5. Three" />
                <mx:Object c1="6. One" c2="6. Two" c3="6. Three" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

Tagged as: headerSeparatorSkin