How to set Header Text of AdvancedDatagrid Column with Multiple Color in FLEX?

Question

I would like to set multiple colors of header text of a column in my advanced data grid. For Example: Suppose header text is: Price File Id *

where * is for representing mandatory. now I want "Price File Id" in black and "*" in red color. Following code showing full header text as Red.

column.headerText = "Price File Id *"
column.setStyle("headerStyleName","MyMandatoryDataGridStyleHeader");

Please help in this. I am not getting solution anywhere. Also not able to apply css differently.

Answer 1

You can use a HeaderRenderer for this column. In your advancedatagrid column code add following property

<mx:AdvancedDataGridColumn headerRenderer="{new ClassFactory(SampleHeaderRenderer)}"/>

And Create SampleHeaderRenderer.mxml with the following code

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
                              xmlns:s="library://ns.adobe.com/flex/spark" 
                              xmlns:mx="library://ns.adobe.com/flex/mx" 
                              focusEnabled="true">
<s:Label text="Price File Id"/>
<s:Label text="*" styleName="MyMandatoryDataGridStyleHeader" />
</mx:HBox>