Can't change AdvancedDataGrid Header Color

[budkin]

Hello Flexxers,

I'm having a really annoying problem styling the AdvancedDataGrid header text colors. With a regular DataGrid you can use a property called "headerStyleName" to set the color of the header text. According to the documentation this style is applicable to AdvancedDataGrid as well. The problem is that it won't apply the style no matter what I do.

This is driving me nuts as I have to use Advanced data grids because of their added functionality. If anyone can help me with this issue it would be much appreciated. I was going to post sample application code so you could see the issue but I don't have enough posts here for links.

[budkin]

Anyone have any ideas on this? I still can't figure out how to change the dang color of the header text.

[budkin]

I got the answer on the Adobe Forums if anyone else is having this problem. Just add this style to your inline styles or your css file:

mx|AdvancedDataGridHeaderRenderer
{
color: #FF0000;
fontWeight: bold;
}

[savioseb]

Thanks a lot! this helped me big time!

Anyway we can remove the line next to the sorting option. I have disabled sort, but the vertical line still appears.

[Sly_cardinal]

Originally Posted by savioseb

Thanks a lot! this helped me big time!

Anyway we can remove the line next to the sorting option. I have disabled sort, but the vertical line still appears.

I'm using Flex 3.5 but point you in the right direction for a Flex 4 solution.
You just need to set the 'header-sort-separator-skin' to a skin that won't draw anything for the separators. I've used the ProgrammaticSkin:

MXML:

<mx:AdvancedDataGrid id="grid"
    styleName="dataGrid">
    ...
</mx:AdvancedDataGrid>

CSS:

.dataGrid {
    header-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");
    header-sort-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");
}