Flex 4.5 - Transparent Background on Spark DataGrid Headers

Question

In short, I am attempting to get this result:

I almost got it, but the part that's giving me trouble is making the header background transparent. I am making a custom MXML skin based on the default Spark DataGrid skin. I tried setting the contentBackgroundAlpha to 0 on the columnHeaderGroup and the headerRenderer, but that didn't work. I tried setting visible to false for either of those, but that made it so that the text didn't show up either, so that didn't work. There is no setting for backgroundAlpha in either of those two, so I'm not sure what else to try.

Any help would be greatly appreciated. Thanks!

Answer 1

Copy everything from default header renderer... then remove everything that says "s:Rect", then set that as your header renderer for each column. Here's the code you should end up with as your header renderer: http://pastebin.com/XPu1cSK9

You don't even need to make a skin for the datagrid.

Answer 2

You should be looking at the mx.skins.spark.DataGridHeaderBackgroundSkin

Something like this should do the trick:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
minWidth="21" minHeight="19">

<fx:Script>
    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
</fx:Script>

<s:Rect left="0" right="0" top="0" bottom="0" alpha="0">
</s:Rect>

<s:Rect left="0" right="0" top="0" bottom="0" alpha="0">
</s:Rect>

<s:Rect left="0" right="0" bottom="0" height="9" alpha="0">
</s:Rect>

<s:Rect left="0" right="0" top="0" height="9" alpha="0">
</s:Rect>

<s:Rect left="0" right="0" bottom="0" height="1" alpha="0">
</s:Rect>

</s:SparkSkin>