ItemRenderer overides the DataGrid styles

Question

Hi,
I have a CSS file where I have defined the styles for DataGrid like following:
DataGrid
      selection-color: #243E4F;
      text-selected-color: #FFFFFF;
      alternating-item-colors: #DCE3E8, #FFFFFF;
I have a Datagrid in my mxml component page. I use an ItemRenderer for the html text in one of my datagrid column.
<mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                <mx:itemRenderer>
                  <mx:Component>
                      <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                </mx:Component>
                </mx:itemRenderer>
</mx:DataGridColumn>
But now when I select any of the DataGridColumn 'AccountName', the font color (ie. text-selected-color )  in this cell turns black.
Please help me to resolve this issue?
Thanks in advance,
Micheal

Answer 1

Hi,
Thank you for your quick response.
My DataGrid is inside a HBox.
//my component mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            [Bindable]
            public var cashData:ArrayCollection = new ArrayCollection();
            private function formatBalance(item:Object, column:DataGridColumn):String
                return item.Balance.currencyCode+''+item.Balance.amount;
        ]]>
    </mx:Script>
    <!--<mx:CurrencyFormatter id="currFmt" currencySymbol="$"/>-->
    <mx:DataGrid width="100%" height="100%" id="gridID" dataProvider="{cashData}" showHeaders="false" verticalGridLines="true">
        <mx:columns>
            <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                <mx:itemRenderer>
                  <mx:Component>
                      <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="Balance" headerText="Balance" labelFunction="formatBalance" width="122" textAlign="right"/>
        </mx:columns>
    </mx:DataGrid>
</mx:VBox>
Actually I set the dataprovider from PureMVC mediator. You can see that column 'AccountName' is an 'htmltext'. This value will be a link not a editable text.
ie. <span class="xyz"><a href= "someurl.do?x=20106650&amp;y=10232371"><strong>details</strong></a><br/><span class="caption">Intranet Card</span></span>
Thanks,
Michael