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>

7 thoughts on “Removing the header separator on the DataGrid control in Flex

  1. Hi peter,
    I’ve just searched through your whole blog, and couldn’t find your email address. I have a question that I would like to ask regarding dataProviders, since it’s causing problem within my application.

    Thanks,

  2. Hi,

    I really like your blog. Great and helpful posts. But recently it seems like your are not posting any more visible examples. Why? I guess, you could even post examples created with Flex Gumbo and simply mark them as Beta and other requirements.

    Keep up the good work!

  3. Hello,

    I simply love this site, it’s full of infos.

    But I have a question, as I’m very new to flex…thought you could help since all your examples are well explained. I’m sorry if it doesn’t fit in this but still it is datagrid related.

    How is is possible to add a combobox in the header (for filtering) AND to keep the standard header that sorts acending or descending ?
    I’m quite desperate about this, I’ve found a way to put comboboxes, but then it erases the header itself. I’d really need the two functionnalities in the header…

    Thanks in advance if you can help on this matter :)

    Regards

  4. Jfk003,

    I’ve never tried that (and I’m not sure how it would work since how would the header know if clicking on the ComboBox should sort the column or open the ComboBox drop down menu)…
    The best place to ask would probably be the FlexCoders mailing list.

    Peter

  5. Jfk003,

    You should be able to do this with a custom renderer. The way I would do it is to add 2 children to the header, the combobox and a something like a picture of an arrow. I’d then add event listeners to both and catch them seperately. This way you can handle the click in both places. One for sort and one for the combobox.

    Good luck.

Comments are closed.