Programmatic multi-column sorting on DataGrid or AdvancedDataGrid

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;

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)

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.

Multi-column sorting in DataGrid
Multi-column sorting in a default AdvancedDataGrid
Multi-column sorting in an AdvancedDataGrid
with sortExpertMode=true

2 Responses to Programmatic multi-column sorting on DataGrid or AdvancedDataGrid

  1. Kannan says:

    Hai Raghunath,

    Would u please give me a sample to rendering text with summary data in ADG

  2. Subrata says:

    Why it is not working if we have a grouping field?

    This is my data..

    And i am doing grouping by group name, so with in
    group name sum_Byte_Count is not getting sorted.

    Where as if i dont put group name in grouping it is working fine.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s