Setting the default Spark DataGrid class to sort by creating a Complete application (Flex 4.5)

Question

I have a DataGrid spark component with multiple columns, and I want my application to be in descending order in the first column in the DataGrid by default. I would like to use the default built-in sorting that occurs when the top header is clicked once. I do not need to sort the ArrayCollection array that I am working with, or change what the comparators are.

I also need any custom sort, such as clicking on another column heading, to override the default sort.

Does anyone have any ideas on how to do this? Thanks.

Answer 1

Just use the sortByColumn method:

 var columnIndexes:Vector.<int> = Vector.<int>([ 0 ]); dataGrid.sortByColumns(columnIndexes, true); 

Here is a complete example:

DataGridSort.mxml

 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="sortDataGrid();"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.collections.ArrayList; [Bindable] private var dataProvider:ArrayCollection = new ArrayCollection( [ new Product("iPad", "Detroit", 599), new Product("iPod", "Burbank", 49), new Product("iPod Nano", "Burbank", 39), new Product("Flash Drive", "Burbank", 59), new Product("iPod", "Burbank", 49), new Product("Galaxy Tab", "Coldbridge", 499), new Product("HTC Hero", "Abidjan", 700) ]); private function sortDataGrid():void { // you can also use Vector.<int>([ 0, 1 ]); to sort by first 2 columns var columnIndexes:Vector.<int> = Vector.<int>([ 0 ]); // set 2nd argument to true to show sorting triangle dataGrid.sortByColumns(columnIndexes, true); } ]]> </fx:Script> <s:DataGrid id="dataGrid" horizontalCenter="0" verticalCenter="0" width="200" dataProvider="{dataProvider}"> <s:columns> <s:ArrayCollection> <s:GridColumn dataField="name"/> <s:GridColumn dataField="location"/> <s:GridColumn dataField="price"/> </s:ArrayCollection> </s:columns> </s:DataGrid> </s:Application> 

Product.as

 package { import flash.events.EventDispatcher; public class Product extends EventDispatcher { public function Product(name:String = null, location:String = null, price:Number = 0) { super(); this.name = name; this.location = location; this.price = price; } public var name:String; public var location:String; public var price:Number; } } 

Answer 2

Alternatively, if you do not want the datagrid to actually sort, for example, when you are working with a paging system with elements already sorted. Extend the spark dataset and add the following method:

 public function PlaceSortIndicator(columnIndex:uint, descending:Boolean):void { if(columnIndex >= 0 && columns != null && columns.length > columnIndex) { var column:GridColumn = columns.getItemAt(columnIndex) as GridColumn; if(column != null) { column.sortDescending = descending; if (columnHeaderGroup) columnHeaderGroup.visibleSortIndicatorIndices = new <int>[columnIndex]; } } }