Flex DataGrid Auto Sort Example

This post is just an extension of my earlier post describing the auto sort solution for your Flex DataGrid. Upon request, I have built a simple code that demonstrates it. This is how it looks: -

The Downloads column is auto sorted and that too in descending order. The code is just pasted below (MXML and ActionScript Part): -

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			// Action Script goes here
		]]>
	</mx:Script>
	<mx:DataGrid id="summary_dg" dataProvider="{dg_data.download_data}" width="400" height="120">
		<mx:columns>
			<mx:DataGridColumn headerText="Project Keyword and Version" dataField="keyword_version"/>
			<mx:DataGridColumn headerText="Downloads" dataField="downloads" width="150" sortDescending="true"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Action Script that should go into <mx:Script> </mx:Script>: -

import mx.events.DataGridEvent;

[Bindable]
private var dg_data:XML;

private function init():void {
	dg_data =
		<downloadXML>
			<download_data>
				<keyword_version>Product A</keyword_version>
				<downloads>1000</downloads>
			</download_data>
			<download_data>
				<keyword_version>Product B</keyword_version>
				<downloads>2000</downloads>
			</download_data>
			<download_data>
				<keyword_version>Product C</keyword_version>
				<downloads>3000</downloads>
			</download_data>
			</downloadXML>;

	summary_dg.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE, false, true, 1, null, 0, null, null, 0));
}

Hope you find this useful.

VN:F [1.9.13_1145]
Rating: 5.0/5 (2 votes cast)
Flex DataGrid Auto Sort Example, 5.0 out of 5 based on 2 ratings

  • Narender

    Excellent post! It did help

  • Pingback: Auto sort of DataGrid column in FLEX | Flex Blogger

  • rvt
  • http://www.hsharma.com Hemanth Sharma

    Rvt, that can be done too. Just that, it would simply be sorting the data itself and not the DataGrid Column.

    The example shows how to sort a column (making the arrow appear in the header of the column you sort) and retaining the data in it’s original order.

    - h

  • Bonnie

    Hi,

    I am using Flex 4, ActionScript 3. I need to disable auto-sort on an AdvancedDataGrid. I want sort to happen only when the user clicks the column headers, not when new rows are added or when values are changed.

    So far, the only solution I found is this:
    http://tomek.me/disable-sort-on-datagrid-edit-update/
    This seems a little too complex for me.

    Many months ago, I saw a solution that placed an event.preventDefault() somewhere. I thought that I would have no trouble finding it again, but I am.

    Pleae help.
    Thank you,
    Bonnie