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.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/toggling-sortable-columns-in-a-flex-datagrid-control/ -->
<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>
View source is enabled in the following example.
If you want to detect when a data grid column header has been clicked, you can listen for the headerRelease event on the DataGrid control, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/30/toggling-draggable-columns-in-a-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.events.DataGridEvent;
private function dataGrid_headerRelease(evt:DataGridEvent):void {
var dg:DataGrid = DataGrid(evt.currentTarget);
var column:DataGridColumn = dg.columns[evt.columnIndex];
debug.text += column.dataField + " (sortDescending:" + column.sortDescending + ")" + "\\n";
}
]]>
</mx:Script>
<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:DataGrid id="dataGrid"
dataProvider="{arr}"
headerRelease="dataGrid_headerRelease(event)">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="data" />
</mx:columns>
</mx:DataGrid>
<mx:TextArea id="debug"
width="{dataGrid.width}"
height="{dataGrid.height}" />
</mx:Application>
View source is enabled in the following example.
{ 9 comments… read them below or add one }
very good!this is very basic sample!
bit bug :)
debug.text = column.dataField ” (sortDescending:” column.sortDescending “)” “n”;
At end, replace “n”; by “\n”;
Alberto,
Thanks for the heads up. The code actually has the ‘\n’ if you download source, but something in the HTML or WordPress template always eats my single backslashes. I doubled up the backslash so now it should appear properly above.
Peter
Hi guys, someone knows why when i start clicking the datagrid header column, i receive two events with the same order? example:
label (sortDescending:false)
label (sortDescending:false)
label (sortDescending:true)
After the 3ยบ click, the order ascending/descending starts to work correctly.
Is it a bug?
thx in advance
Thanks for interesting clause
Hi All.
Just incase, you come across this sample, you will find that Alejandro is talking the truth. For whatever reason the sortDescending property does not accurately reflect the sort order. For a good sample that works and shows the correct sorting order, take a look at http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/#more-117
It works as expected.
how to sort the data in the datagrid wnen an xml was passed as swap the header coluimn using the selected item in the combobox
Hi Peter,
I want to have some more functionality here. If we make the srtableColumns false, still the sortIcon appears in the datagrid. Can please tell me is it possible for me to this.
regards
Raghava
@raghava,
I’m not sure what you’re seeing, but I only get the sort arrow if the Boolean
sortableproperty to true. Are you changing thesortableorsortableColumnsproperty at runtime?Peter