Changing fontWeight of Spark DataGrid headers

In Flex 4.5, we introduced the Spark version of DataGrid, which provides a vastly improved skinning experience. Unfortunately, a more flexible skin also means less tweaking through styles. One example is the DataGrid’s header’s label. By default, the “fontWeight” style is hard-coded to bold, along with some other text styles. Luckily, we’ve provided a relatively simple way to customize this particular piece of the header. This post will show you how to customize the Spark DataGrid’s header’s label.

One way to customize the label of the default header renderer is to create a subclass of the default header renderer that overrides the “labelDisplay” part of the header renderer.

First, create a custom mxml component using DefaultGridHeaderRenderer. Next, define a Label (or any TextBase subclass) in the <fx:Declarations> section with id=”labelDisplay”. This essentially overrides the original “labelDisplay” definition in the DefaultGridHeaderRenderer class. Now, you can add or remove whatever text styles you want. Also remember that you should only add components and component definitions to the <fx:Declarations> section. Adding components as children of this skin will remove all of the children that were inherited from DefaultGridHeaderRenderer.

Below is an example custom header renderer which removes the “fontWeight” and “textAlign” styles from the label (CustomHeaderRenderer.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s: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">
 
    <fx:Declarations>
        <!-- Remove text styles as you wish.
             I have removed fontWeight="bold" and textAlign="start" here.
             Must be a TextBase instance (not a factory). -->
        <s:Label id="labelDisplay" 
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
</s:DefaultGridHeaderRenderer>

To set your custom header renderer, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML (in similar fashion to the custom header renderer) and define a component with id=”headerRenderer” in the <fx:Declarations> section. Example below (CustomDataGridSkin.mxml):

<?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:local="*">
 
    <fx:Declarations>
 
        <!-- Must be a factory with id="headerRenderer".
             This overrides the similar headerRenderer definition in DataGridSkin -->
        <fx:Component id="headerRenderer">
            <local: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). You can also use some CSS to style your custom header renderer as I’ve done here:

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace local "*";
 
        local|CustomHeaderRenderer
        {
            color: blue;
            fontStyle: italic;
        }
 
    </fx:Style>
    ...
    <s:DataGrid skinClass="CustomDataGridSkin">
    ...

Running example with source below:

View Source

Note: This sample requires Flex SDK 4.5.1 or higher. You can get the latest SDK builds from opensource.adobe.com.

5 thoughts on “Changing fontWeight of Spark DataGrid headers”

  1. Hang on,

    Are you really telling me I have to do all this to align a column header? This simply cannot be right.

  2. What if you want to change each column’s header individually? For example, the “call” and “name” columns above are text columns and look best left justified, whereas the “key” and “price” columns above are numbers and may look best right justified? How to create custom header renderer to left align text for “call” and “name”, and right align text for “key” and “price”?

  3. It used to be simple using mx. It seems that they wanted to support all cases that they made simple implementations so complex. It defeats the purpose of being a 4GL language.

  4. Is creating the custom skin a required step, or can you assign the HeaderRenderer to the DataGrid directly?

Comments are closed.