One of the most requested features in the DataGrid (DG) was the ability to do multi-column sorting. This request was addressed by the engineering team in the AdvancedDataGrid (ADG) Component. It gives you a very neat UI indication and multiple ways to do multi-column sorting. But what this post is about is how one can do a programmatic multi-column sorting so that the user is presented with data that is already multi-column sorted.

You do not need an ADG for programmatic multi-column sorting. The trick lies in populating the Sort object of the Collection (which is the dataProvider of the Grid), with an array of sort fields which specify how the multi-column soring needs to be. But having said that, if you are using an ADG, then you get a arrow-indicator that the column is in the sort order and a number indicating where in the sort order it lies.

Consider a variable called myDP which is an ArrayCollection that populates the DG or ADG. The Collection has 3 fields [”artist”, “album_name”, “price”]. Our objective is to sort the Artist by ascending order and then the price by an ascending order, so that you can find the least costly object for each artist. The code below lets you do this…

var sortThese:Sort = new Sort();
sortThese.fields = [new SortField(”artist”, true, false), new SortField(”price”, true, false,true)];
myDP.sort= sortThese;
myDP.refresh();

The SortField class constructor is of the construct as below.

SortField() Constructor
public function SortField(name:String = null, caseInsensitive:Boolean = false, descending:Boolean = false, numeric:Object = null)

Parameters
name:String (default = null) — The name of the property that this field uses for comparison

caseInsensitive:Boolean (default = false) — When sorting strings, it tells whether to ignore the case of the values.

descending:Boolean (default = false) — Tells whether to arrange items in descending order.

numeric:Object (default = null) — Tells whether to compare sort items as numbers, instead of alphabetically.

Below are the results when the ArrayCollection is attached to a DG, normal ADG & an ADG with sortExpertMode turned on. By default, the sortExpertMode property is set to false, which means you click in the header area of a column to sort the rows of the AdvancedDataGrid control by that column. You then click in the multiple-column sort area of the header to sort by additional columns. If you set the sortExpertMode property to true, you use the Control key to select every column after the first column to perform sort.