Skinning selected DataGrid header in Flex 4

Question

Hi,
What I'm trying to do seems trivial, but after hours of searching for historical clues I have still not achieved it. I simply want to reskin only the selected header. There seems to be multiple approaches:
1) define a custom headerRenderer - but this ends up with the sort indicator cobbled on top of your custom drawn area
2) rework the header background skin to clip/draw the selected column differently - but this requires clipping to the selected column, and figuring out the dimensions to clip to
Am I missing an obvious and easier solution?  Any examples out there?
Thanks!

Answer 1

Thanks again Alex.
I managed to achieve something satisfactory with the following custom HeaderRenderer. The negative padding on the right side allows the gradient to extend underneath the sort skin to fill the entire column. This seemed easier (if not cleaner) than also skinning the sort arrow skin in the same way.
I also had to extend DataGridHeader and override drawHeaderIndicator (for the rollover of the column header) and drawSelectionIndicator (for the transitionary state of clicking on the column header before the sort takes effect).
Still a work in progress, but hopefully this will save the next Googler some time in achieving any of these goals.  And of course I welcome any refinements or any admonishments that I'm doing something really stupid.
<?xml version="1.0" encoding="utf-8"?>
<s:Group> 
implements="mx.controls.listClasses.IListItemRenderer"xmlns:fx="
http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/halo"width="
100%" height="100%">
<fx:Script>
<![CDATA[
import com.company.player.model.Constants; 
import mx.collections.ArrayCollection; 
import mx.controls.DataGrid; 
import mx.controls.dataGridClasses.DataGridColumn; 
import mx.controls.listClasses.IListItemRenderer; 
import mx.controls.listClasses.ListBase; 
private var _data:Object; 
static private const LABEL_BUFFER:int = 4; 
static private const SORT_INDICATOR_WIDTH:int = 14; 
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
var owner:DataGrid = owner as DataGrid; 
var col:DataGridColumn = data as DataGridColumn; 
var bSorted:Boolean = false; 
var ac:ArrayCollection = owner.dataProvider as ArrayCollection; 
if (ac && ac.sort){
// there's a sort in place - is it on this column?
var sortFieldName:String = ac.sort.fields[0].name; 
bSorted = (sortFieldName == col.dataField);
gradientOverlay.alpha = bSorted ? 1 : 0;
gradientOverlay.visible = bSorted;
lbl.width = col.width - LABEL_BUFFER - (bSorted ? SORT_INDICATOR_WIDTH : 0);
lbl.text = col.headerText;
lbl.setStyle(
"color", bSorted ? "#343434" : "#767676"); 
super.updateDisplayList(unscaledWidth, unscaledHeight);}
]]>
</fx:Script>
<s:HGroup id="gradientOverlay" width="100%" height="100%" paddingTop="-2" paddingRight="{-SORT_INDICATOR_WIDTH}" >
<s:Rect width="100%" height="100%" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{Constants.SELECTION_GRADIENT1}" alpha="1"/>
<s:GradientEntry color="{Constants.SELECTION_GRADIENT2}" alpha="1"/>
</s:LinearGradient>  
</s:fill>
</s:Rect>  
</s:HGroup>
<s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="{LABEL_BUFFER}" >
<s:Label id="lbl" maxDisplayedLines="1" showTruncationTip="true" />  
</s:HGroup>
</s:Group>