Question

I have a spark DataGrid component with several columns and I want to have my application default to descending order on the first column in the DataGrid. I would like to use the built-in default sort that occurs when clicking the top header once. I have no need to sort the ArrayCollection I’m working with or change what the comparators are.

I also want any user-generated sorting such as clicking on a different column’s header to override the default sorting.

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

Answer 1

Just use sortByColumn method:

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

Here is a full 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;

}
}