It’s quite easy to get a row or the text in a row of a DataGrid to change color based on a selection - however, it’s harder to get the column itself to change color.
I figured out the best way to do this is to redraw the cell backgrounds in a custom Item Renderer, based on the currently active sort field.
A demo of the code (with source) is here.

Item Renderer Update Display List Function Code:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
	super.updateDisplayList(unscaledWidth, unscaledHeight);

	try {
		if ( this.owner is mx.controls.DataGrid ){
			obj = this.owner as DataGrid;
			var currentSort:String = obj.dataProvider.sort.fields[0].name;
			obj = this.listData;
			var thisColumn:String = obj.dataField;

			if ( currentSort == thisColumn ){
				drawBackGround(0x49FFAD);
			}
			else {
				drawBackGround(0xFFFFFF);
			}
		}
	}
	catch (e:Error){//do nothing
	}
}

This code sits in the item renderer code as show below:

package com.caspar
{
	import flash.display.Graphics;

	import mx.controls.DataGrid;
	import mx.controls.Label;
	import mx.controls.listClasses.*; 

	public class HighlightColumnField extends Label {

		private var obj:Object;
		private var g:Graphics;

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {}
                [code above goes here]

		private function drawBackGround(fill:uint) : void {
			g = graphics;
			g.clear();
            g.beginFill(fill);
            g.drawRect(0, -3, unscaledWidth, unscaledHeight+4); g.endFill();
		}
	}
}

As can be seen, this component checks it’s parent’s sort to see if it corresponds to the name of it’s own data field. If so, it draws a green background. Otherwise, it draws a normal background.
This is incorporated into the main Application datagrid (which has horizontal gridlines turned off - if you want to add them, you will need to change the drawing code a little to cover them).
The datagrid code is shown below:

<mx:DataGrid dataProvider="{books}"   horizontalGridLines="false">
		<mx:columns>
			<mx:DataGridColumn headerText="Title" dataField="title" itemRenderer="com.caspar.HighlightColumnField" paddingLeft="4" />
			<mx:DataGridColumn headerText="Author" dataField="author" itemRenderer="com.caspar.HighlightColumnField" paddingLeft="4" />
			<mx:DataGridColumn headerText="URL" dataField="url" itemRenderer="com.caspar.HighlightColumnField" paddingLeft="4" />
			<mx:DataGridColumn headerText="Read" dataField="read" itemRenderer="com.caspar.HighlightColumnField" paddingLeft="4" />
		</mx:columns>
	</mx:DataGrid>

The rest of the full source code is on the demo app above. Enjoy!

Related posts:

1. How To Make A DataGrid Row Change On Hover Here is a wee example that shows how to get...
2. Masking an Image in Flex Recently I needed to apply rounded corners to all Images...
3. Bevel Gradient Component Here is a small example of one method of creating...
4. Flex TitleBox Component For a recent project I was working on, I needed...

Related posts brought to you by Yet Another Related Posts Plugin.