Objective:

To create a arrow marker on a datagrid column, when we do custom sorting using datagrid component.

Solution:

using datagrid column class extend a custom class and add a itemrenderer with image and label component.

Program Listing:

Main.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initDP();" xmlns:local="*">

<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.collections.*;

// Declare storage variables and initialize the simple variables.
// The data provider collection.
private var myDPColl:ArrayCollection;
// The Sort object used to sort the collection.
[Bindable]
private var sortA:Sort;
// The sort fields used to determine the sort.
private var sortByInStock:SortField;
private var sortByArtist:SortField;
private var sortByAlbum:SortField;
private var sortByPrice:SortField;

private var sortBool:Boolean = false;
// The data source that populates the collection.
private var myDP:Array = [
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, InStock: true},
{Artist:'Pavement', Album:'Crooked Rain, Crooked Rain',
Price:10.99, InStock: false},
{Artist:'Pavement', Album:'Wowee Zowee',
Price:12.99, InStock: true},
{Artist:'Asphalt', Album:'Brighten the Corners',
Price:11.99, InStock: false},
{Artist:'Asphalt', Album:'Terror Twilight',
Price:11.99, InStock: true},
{Artist:'Asphalt', Album:'Buildings Meet the Sky',
Price:14.99, InStock: true},
{Artist:'Other', Album:'Other', Price:5.99, InStock: true}
];

//Initialize the DataGrid control with sorted data.
private function initDP():void {
//Create an ArrayCollection backed by the myDP array of data.
myDPColl = new ArrayCollection(myDP);
//Create a Sort object to sort the ArrrayCollection.
sortA = new Sort();
//Initialize SortField objects for all valid sort fields:
// A true second parameter specifies a case-insensitive sort.
// A true third parameter specifies descending sort order.
// A true fourth parameter specifies a numeric sort.
sortByInStock = new SortField("InStock", true, true);
sortByArtist = new SortField("Artist", true);
sortByAlbum = new SortField("Album", true);
sortByPrice = new SortField("Price", true, false, true);
// Sort the grid using the InStock, Artist, and Album fields.
sortA.fields=[sortByInStock, sortByArtist, sortByAlbum];
myDPColl.sort=sortA;
// Refresh the collection view to show the sort.
myDPColl.refresh();
// Initial display of sort fields
tSort0.text = "First Sort Field: InStock";
tSort1.text = "Second Sort Field: Artist";
tSort2.text = "Third Sort Field: Album";

// Set the ArrayCollection as the DataGrid data provider.
myGrid.dataProvider=myDPColl;
// Set the DataGrid row count to the array length,
// plus one for the header.
myGrid.rowCount=myDPColl.length +1;
}

// Re-sort the DataGrid control when the user clicks a header.
private function headRelEvt(event:DataGridEvent):void {
var arrower:String;
if(sortBool == false) {
sortBool = true;
arrower = "down";
}
else{
sortBool = false;
arrower = "up";
}
var i:Number;
for(i = 0; i< myGrid.columnCount; i++){
myGrid.columns[i].arrowValue = "none";
}

myGrid.columns[event.columnIndex].arrowValue = arrower;
// The new third priority was the old second priority.
sortA.fields[2] = sortA.fields[1];
tSort2.text = "Third Sort Field: " + sortA.fields[2].name;
// The new second priority was the old first priority.
sortA.fields[1] = sortA.fields[0];
tSort1.text = "Second Sort Field: " + sortA.fields[1].name;
// The clicked column determines the new first priority.
if (event.columnIndex==0) {
sortA.fields[0] = sortByArtist;
} else if (event.columnIndex==1) {
sortA.fields[0] = sortByAlbum;
} else if (event.columnIndex==2) {
sortA.fields[0] = sortByPrice;
} else {
sortA.fields[0] = sortByInStock;}
tSort0.text = "First Sort Field: " + sortA.fields[0].name;
// Apply the updated sort fields and re-sort.
myDPColl.sort=sortA;
// Refresh the collection to show the sort in the grid.
myDPColl.refresh();
// Prevent the DataGrid from doing a default column sort.
event.preventDefault();
}
]]>
</mx:Script>

<!-- The Data Grid control.
By default the grid and its columns can be sorted by clicking.
The headerRelease event handler overrides the default sort
behavior. -->
<mx:DataGrid id="myGrid" width="100%" headerRelease="headRelEvt(event);">
<mx:columns>
<local:ImageDatagridColumn arrowValue="down"
headerText="Googlee" minWidth="200"
dataField="Album" />
<local:ImageDatagridColumn width="75" dataField="Price" />
<local:ImageDatagridColumn width="75" dataField="InStock"
headerText="In Stock"/>
</mx:columns>
</mx:DataGrid>
<mx:VBox>
<mx:Label id="tSort0" text="First. Sort Field: "/>
<mx:Label id="tSort1" text="Second Sort Field: "/>
<mx:Label id="tSort2" text="Third Sort Field: "/>
</mx:VBox>
</mx:Application>

ImageDatagridColumn

package {
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.ClassFactory;
public class ImageDatagridColumn extends DataGridColumn {
private var ArrowIndicater:String;
public function ImageDatagridColumn(columnName : String = null) {
super(columnName);
headerRenderer = new ClassFactory(RendererDGHeader);
}
public function set arrowValue(value : String) : void {
ArrowIndicater = value;
}
public function get arrowValue(): String {
return ArrowIndicater;
}
}
}

RendererDGHeader.mxml

<?xml version="1.0"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
[Embed(source="up.png")]
[Bindable]
public var up : Class;
[Embed(source="down.png")]
[Bindable]
public var down : Class;
[Bindable]
public var none : Class;
[Bindable]
public var theImage : Class;
[Bindable]
public var headerLabel:String;
override public function set data(value : Object) : void {
//ids.text = value.toString();
var col : ImageDatagridColumn = value as ImageDatagridColumn;
headerLabel = col.headerText;
if(col.arrowValue == "down")
theImage = down;
else if(col.arrowValue == "up")
theImage = up;
else
theImage = none;
}
]]>
</mx:Script>
<mx:Label text="{headerLabel}" fontWeight="bold" />
<mx:Image toolTip="State" source="{theImage}"/>
</mx:HBox>