Skinning A Flex Spark DataGrid Header

Creating a custom background color or a custom skin for a DataGrid in Spark is not as simple as it was for Halo components. To create a custom skin for all headers in a DataGrid is accomplished by extending the DataGridSkin class as a new MXML component. Here is a simple example of a “RedDataGridSkin” class where we will just be worrying about the “headerRenderer”:

<spark: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"<br>                              xmlns:spark="spark.skins.spark.*"
                              xmlns:local="*"
  <fx:Declarations>
    <fx:Component id="headerRenderer">
      <local:RedGridHeaderRenderer />
    </fx:Component>
  </fx:Declarations
</spark:DataGridSkin>

Notice, that the only custom component we declared in our skin is the RedGridHeaderRenderer. All of the other default skin components will remain since we are extending the base DataGridSkin.

So what does the RedGridHeaderRenderer do? The RedGridHeaderRenderer extends the SDK’s DefaultGridHeaderRenderer and reimplements it’s visual skinning components. Since the full implementation of the renderer is lengthy I will only post a small portion in line (see the code demo/source at the bottom of this post for the full example). Here is a code snippet from a GridItemRenderer called “RedGridHeaderRenderer”:

<!-- layer 2: fill -->
 <!--- @private -->
 <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
   <s:fill>
     <s:LinearGradient rotation="90">
       <s:GradientEntry color="0xFFFFFF"
                        color.hovered="0xBBBDBD"
                        color.down="0xAAAAAA"
                        alpha="0.85" />
       <s:GradientEntry color="0xFF030D"
                        color.hovered="0x9FA0A1"
                        color.down="0x929496"
                        alpha="0.85" />
     </s:LinearGradient>
   </s:fill>
</s:Rect>

The only thing I changed here from the default implementation of this renderer is the second GradientEntry’s color. I changed the color to a red hex code (0xFF030D) which will give all of my DataGrid’s that use the skin and renderer a red gradient.

To use our new skin and renderer we need to set our DataGrid’s skinClass to “RedDataGridSkin” and all of the DataGrid headers will use the new skin/renderer. A simple example:

<s:DataGrid skinClass="RedDataGridSkin">

If we want to get more fancy, we can also alter column header renderers on a column by column basis. I have also created a “BlueGridHeaderRenderer” (see the code demo/source at the bottom of this post for the full example). Here we will use the “BlueGridHeaderRenderer” to create a single blue column header while the rest of the coumns are using the “RedGridHeaderRenderer” defined in “RedDataGridSkin”:

<s:DataGrid skinClass="RedDataGridSkin">
  <s:columns>
    <s:ArrayCollection>
      <s:GridColumn headerText="Header 1" width="200"/>
      <s:GridColumn headerText="Header 2" width="200"/>
      <s:GridColumn headerText="Header 3" width="200"
            headerRenderer="{new ClassFactory(BlueGridHeaderRenderer)}"/>
    </s:ArrayCollection>
  </s:columns>
</s:DataGrid>

The full code of this example (right click ->view source) inside of a running demo can be viewed HERE.