Flex Examples

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.