DataGrid headerStyle doesn’t override column styles

There is a bug in the Flex SDK where styles set for your DataGrid override any styles set using a column “headerStyle”. This bug is described in bug SDK-10900 in the Flex Public Bugbase. From the comments in the bug, I’m not sure that this will get fixed for our next release, so, I thought that I would post a workaround. The workaround is pretty simple, but, you have to use a custom headerRenderer. Here is an example of an Application displaying the bug: DGHeaderStyleBug.swf

The Application has the following simple code:

<mx:Style>
.headerCustomStyle
{
fontWeight: ‘bold’;
textAlign: ‘center’;
color: #0000FF;
}
</mx:Style>
<mx:DataGrid dataProvider=”{flatData}” headerStyleName=”headerCustomStyle”>
<mx:columns>
<mx:DataGridColumn headerText=”Product” dataField=”name” textAlign=”right” color=”red” />
<mx:DataGridColumn headerText=”Version” dataField=”version” />
<mx:DataGridColumn headerText=”Code Name” dataField=”codeName” textAlign=”right” />
</mx:columns>
</mx:DataGrid>

From the code, you would think that the headers should all be blue, center aligned and bold. Unfortunately, the header styles got overriden by the styles like ‘color’ and ‘textAlign’ set in each of the DataGridColumns.

To solve this problem, use a custom headerRenderer that defines your styles. Here is an example of one:

package {
import mx.controls.Label;public class MyCustomHeader extends Label {

public function MyCustomHeader(): void
{
setStyle(‘fontWeight’, ‘bold’);
setStyle(‘textAlign’, ‘center’);
setStyle(‘color’, 0x0000FF);
}
}
}

Solution Demo: DGHeaderStyle.swf

Solution Code: DGHeaderStyle.mxml, MyCustomHeader.as

7 responses

  1. Have you managed to make a custom DataGrid headerRenderer in Flash cs3 AS3?

  2. Hi Doug, I haven’t done this before, but, I’ll try it out soon and let you know. I’m wondering if you might be able to use the Flex/Flash component kit for this. I’m not sure, however.

  3. I am having Datagrid with Two Columns.

    Now If I want to Change Skin of First Column’s Header to upSkin1_mc residing in Library with same Linkage name.

    Skin of Second Column’s Header to upSkin2_mc residing in Library with same Linkage name.

    How this Can be achieved? Please Help Me.

    Thanks.

    Kuldip D Gandhi

  4. Does anyone know how to use styles to set the rollover color of the header text in a datagrid? I have white text on a dark background in the header of my datagrid and can get the background color to change on the rollover but not the header text color.

    1. I think you need to create a customer headerRenderer to do this.

  5. I have a headerRenderer,that looks like this,displays the summary info of the column too.

    I can’t get the textAlign to work,when I override the updateDisplayList,but the textcolor seems to change.please advise.

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
    setStyle(“fontWeight”, “bold”);
    setStyle(“textAlign”, “center”);
    setStyle(“color”, “0x0000FF”);
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    1. The headerRenderer looks like below:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: