How to change header font style in Spark DataGrid?

Question

I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- Artur

Answer 1

Hi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx"
                                 xmlns:skins="spark.skins.spark.*"
                                 xmlns:comps="comps.*">
    <fx:Declarations>
        <!-- Remove fontweight="bold" and other styles as you wish
             Must be a component and not a factory. -->
        <s:Label id="labelDisplay"
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 textAlign="start"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the  spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer  component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*"
                xmlns:comps="comps.*">
    <fx:Declarations>
        <!-- Must be a factory with the right id for the skin part -->
        <fx:Component id="headerRenderer">
            <comps:CustomHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin