textRollOverColor in Flex DataGrid part 2

In my last post I presented a simple way to customise the DataGridItemRenderer class so the Flex DataGrid control would use the textRollOverColor and textSelectedColor styles correctly. But I also noted that the solution would not fix the DataGrid header items... well, here's my solution to that problem.

First of all, it's worth noting that there are two main reasons why a custom DataGridItemRender is not adequate for the DataGrid header items. The first reason is that the renderer's validateNow() method is almost never called for header items, even though it also called correctly, and often, for the data items. And the second reason is this: the validateNow() method (both the original version, and my custom version) depends on two DataGrid methods in order to determine which text style to use. Those methods are isItemHighlighted() and isItemSelected(). However, neither of those methods work for header items - they both always return false, making them of no use in determining text color for header items.

So, to correctly use the textRollOverColor and textSelectedColor styles, I created a custom DataGrid control that overrides three mouse handlers: mouseDownHandler(), mouseOverHandler(), and mouseOutHandler(). The overrides are as follows:

override protected function mouseDownHandler(event:MouseEvent):void {
  super.mouseDownHandler(event);
  if (enabled && sortableColumns && isHeaderItem(event.target)) {
    var col:int = listItems[0].indexOf(event.target);
    if (columns[col].sortable && event.target.hasOwnProperty("textColor"))
      event.target.textColor = event.target.getStyle("textSelectedColor");
    }
  }

override protected function mouseOverHandler(event:MouseEvent):void {
  super.mouseOverHandler(event);
  if (enabled && sortableColumns && !event.buttonDown && isHeaderItem(event.target)) {
    var col:int = listItems[0].indexOf(event.target);
    if (columns[col].sortable && event.target.hasOwnProperty("textColor"))
      event.target.textColor = event.target.getStyle("textRollOverColor");
  }
}

override protected function mouseOutHandler(event:MouseEvent):void {
  super.mouseOutHandler(event);
  if (isHeaderItem(event.target) && event.target.hasOwnProperty("textColor"))
    event.target.textColor = event.target.getStyle("color");
}

protected function isHeaderItem(item:Object):Boolean {
  return ( showHeaders && (listItems[0].indexOf(item)>=0) );
}

So now if we put together the custom DataGridItemRenderer from the last post, and a custom DataGrid control with the above overrides, then we have a DataGrid control that uses the textRollOverColor and textSelectedColor styles almost perfectly. I say "almost" because the DataGrid control will still use the base text color when re-ordering columns by dragging, but other than that, it all works as I'd expect it to :)

I've put together a really simple demo app, which you can play with here, and/or view the source.

Paul.