Search Flex Samples

Toggling sortable columns in a Flex DataGrid control

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 version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">

<mx:Array id="arr">

<mx:Object label="User 1" data="1" />

<mx:Object label="User 2" data="2" />

<mx:Object label="User 3" data="3" />

<mx:Object label="User 4" data="4" />

<mx:Object label="User 5" data="5" />

<mx:Object label="User 6" data="6" />

<mx:Object label="User 7" data="7" />

<mx:Object label="User 8" data="8" />

</mx:Array>

<mx:ApplicationControlBar dock="true">

<mx:CheckBox id="sortableColumnsCh"

label="sortableColumns"

selected="true" />

<mx:CheckBox id="labelSortableCh"

label="label.sortable"

selected="true" />

<mx:CheckBox id="dataSortableCh"

label="data.sortable"

selected="true" />

</mx:ApplicationControlBar>

<mx:DataGrid id="dataGrid"

sortableColumns="{sortableColumnsCh.selected}"

dataProvider="{arr}">

<mx:columns>

<mx:DataGridColumn dataField="label"

sortable="{labelSortableCh.selected}" />

<mx:DataGridColumn dataField="data"

sortable="{dataSortableCh.selected}" />

</mx:columns>

</mx:DataGrid>


</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples