Toggling a Flex DataGrid control’s header row

The following example shows you how to toggle the header row in a Flex DataGrid control using the showHeaders property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/toggling-a-flex-datagrid-controls-header-row/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object country="USA"
                gold="35"
                silver="39"
                bronze="29" />
        <mx:Object country="China"
                gold="32"
                silver="17"
                bronze="14" />
        <mx:Object country="Russia"
                gold="27"
                silver="27"
                bronze="38" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showHeaders"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            showHeaders="{checkBox.selected}">
        <mx:columns>
            <mx:DataGridColumn dataField="country" />
            <mx:DataGridColumn dataField="gold" />
            <mx:DataGridColumn dataField="silver" />
            <mx:DataGridColumn dataField="bronze" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

4 thoughts on “Toggling a Flex DataGrid control’s header row

  1. Claudiu,

    Excellent question. I don’t think users can resize columns if there isn’t a visible header.
    One workaround is to enable the headers when the user rolls over the DataGrid control, as seen in the following example:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Array id="arrDP">
            <mx:Object c="1" c1="One" c2="Two" c3="Three" />
            <mx:Object c="2" c1="One" c2="Two" c3="Three" />
            <mx:Object c="3" c1="One" c2="Two" c3="Three" />
            <mx:Object c="4" c1="One" c2="Two" c3="Three" />
            <mx:Object c="5" c1="One" c2="Two" c3="Three" />
            <mx:Object c="6" c1="One" c2="Two" c3="Three" />
            <mx:Object c="7" c1="One" c2="Two" c3="Three" />
            <mx:Object c="8" c1="One" c2="Two" c3="Three" />
            <mx:Object c="9" c1="One" c2="Two" c3="Three" />
            <mx:Object c="10" c1="One" c2="Two" c3="Three" />
            <mx:Object c="11" c1="One" c2="Two" c3="Three" />
        </mx:Array>
    
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrDP}"
                showHeaders="false"
                rollOver="dataGrid.showHeaders = true;"
                rollOut="dataGrid.showHeaders = false;" />
    
    </mx:Application>
    

    The other workaround would be to always show the data grid headers, but set the headerHeight property to a small value (such as 2-4). This would still allow users to resize columns, but it wouldn’t display column labels. The only catch is that the sort arrow would still appear, so you would either need to set the sortableColumns property to false, or create a transparent icon for the sort arrow (setting the sortArrowSkin style to null was problematic).

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Array id="arrDP">
            <mx:Object c="1" c1="One" c2="Two" c3="Three" />
            <mx:Object c="2" c1="One" c2="Two" c3="Three" />
            <mx:Object c="3" c1="One" c2="Two" c3="Three" />
            <mx:Object c="4" c1="One" c2="Two" c3="Three" />
            <mx:Object c="5" c1="One" c2="Two" c3="Three" />
            <mx:Object c="6" c1="One" c2="Two" c3="Three" />
            <mx:Object c="7" c1="One" c2="Two" c3="Three" />
            <mx:Object c="8" c1="One" c2="Two" c3="Three" />
            <mx:Object c="9" c1="One" c2="Two" c3="Three" />
            <mx:Object c="10" c1="One" c2="Two" c3="Three" />
            <mx:Object c="11" c1="One" c2="Two" c3="Three" />
        </mx:Array>
    
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrDP}"
                headerHeight="4"
                sortableColumns="false" />
    
    </mx:Application>
    

    Hope that helps,

    Peter

  2. Yes, I was thinking the same way I have implemented the second solution and integrate the headerHeight=”10″ and colors into the design. For the first version they will accept the solution, but in the end I might need to putt together a few lists inside some HDividers and synchronize the data binding and the events or if i will have the time to write some controller from scratch.

    Thank you for your time, the blog is fantastic – full of useful hints and inspiration.

    Regards.

Comments are closed.