Toggling Columns of Grid in Flex

The following example demonstrates how you can enable/disable sortable columns in a Flex DataGrid control using the DataGrid class’s sortableColumns property, as well as toggling specific column’s sortability using the DataGridColumn class’s sortable property.

<?xml:namespace prefix = mx /><mx:application layout="vertical" mx="http://www.adobe.com/2006/mxml" verticalalign="middle" backgroundcolor="white">

<mx:array id="arr">
<mx:object label="User 1" data="1"></mx:object>
<mx:object label="User 2" data="2"></mx:object>
<mx:object label="User 3" data="3"></mx:object>
<mx:object label="User 4" data="4"></mx:object>
<mx:object label="User 5" data="5"></mx:object>
<mx:object label="User 6" data="6"></mx:object>
<mx:object label="User 7" data="7"></mx:object>
<mx:object label="User 8" data="8"></mx:object>
</mx:array>

<mx:applicationcontrolbar dock="true">
<mx:checkbox id="sortableColumnsCh" label="sortableColumns" selected="true"></mx:checkbox>

<mx:checkbox id="labelSortableCh" label="label.sortable" selected="true"></mx:checkbox>

<mx:checkbox id="dataSortableCh" label="data.sortable" selected="true"></mx:checkbox>
</mx:applicationcontrolbar>

<mx:datagrid id="dataGrid" sortablecolumns="{sortableColumnsCh.selected}" dataprovider="{arr}">
<mx:columns>
<mx:datagridcolumn sortable="{labelSortableCh.selected}" datafield="label"></mx:datagridcolumn>
<mx:datagridcolumn sortable="{dataSortableCh.selected}" datafield="data"></mx:datagridcolumn>
</mx:columns>
</mx:datagrid>

</mx:application>

Output: