Sorting by multiple columns

By default, the AdvancedDataGrid control displays data in the order specified in the data passed to its dataProvider property. The AdvancedDataGrid control also lets you sort data after the control displays it in a single column or multiple columns.

To disable sorting for an entire AdvancedDataGrid control, set the AdvancedDataGrid.sortableColumns property to false. To disable sorting for an individual column, set the AdvancedDataGridColumn.sortable property to false.

The way that you sort multiple columns is based on the setting of the sortExpertMode property. By default, the sortExpertMode property is set to false. This setting means that you click in the header area of a column to sort the rows of the AdvancedDataGrid control by that column. Then you click in the multiple column sort area of the header to sort by additional columns. To use the Control key to select every column after the first column to perform sort, set the sortExpertMode property to true.

The following example shows an AdvancedDataGrid control with three columns with the sortExpertMode property set to false:

AdvancedDataGrid control with three columns with the sortExpertMode property set to false
A.
Column header area

B
. Multiple column sort area

Sort the columns with sortExpertMode set to false

  1. Click in the column header area of any column in the AdvancedDataGrid control to sort by that column. For example, click in the column header for the Artist column to sort that column in ascending order. Click the Artist column header again to sort in descending order.

  2. Click in the multiple column sort area of any other column header. For example, click in the multiple column sort area of the Price column to arrange it in ascending order while keeping the Artist column sorted in descending order. You can now find the least expensive album for each artist.

  3. Click in the multiple column sort area for the Price column again to arrange it in descending order.

  4. Click in the multiple column sort area for any other column header to include other columns in the sort.

Sort the columns with sortExpertMode set to true

  1. Click in the column header area of any column in the AdvancedDataGrid control to sort by that column. For example, click in the column header for the Artist column to sort that column in ascending order. Click the Artist column header again to sort in descending order.

  2. While holding down the Control key, click in any other column header. For example, click the column header for the Price column to arrange it in ascending order while keeping the Artist column sorted in descending order. You can now find the least expensive album for each artist.

  3. While holding down the Control key, click the column header for the Price column again to arrange it in descending order.

  4. While holding down the Control key, select any other column header to include other columns in the sort.

The following code implements multiple column sort when the sortExpertMode property is set to true:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleADG.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
                  
         [Bindable]
         private var dpADG:ArrayCollection = new ArrayCollection([
           {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
           {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
           {Artist:'Saner', Album:'A Child Once', Price:11.99},
           {Artist:'Saner', Album:'Helium Wings', Price:12.99},
           {Artist:'The Doors', Album:'The Doors', Price:10.99},
           {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
           {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
           {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
           {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
           {Artist:'The Doors', Album:'Strange Days', Price:12.99},
           {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
         ]);                   
      ]]>
    </fx:Script>

    <mx:AdvancedDataGrid 
        width="100%" height="100%"
        sortExpertMode="true"
        dataProvider="{dpADG}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Artist" />
            <mx:AdvancedDataGridColumn dataField="Album" />
            <mx:AdvancedDataGridColumn dataField="Price" />
        </mx:columns>
   </mx:AdvancedDataGrid>        
</s:Application>
The executing SWF file for the previous example is shown below: