[flexcoders] horizontal line color in advances data grid header when using grouped columns

[akshar]

i just want the horizontal line between the header of grouped column and
column to be of white color.

i am attaching two mxml files :-
1) without css :- it shows the datgrid without any css. you can see
horizontal lines between headers at different level.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" 
width="100%" height="100%" backgroundColor="#FFFFFF">
        <mx:AdvancedDataGrid sortExpertMode="false">
                <mx:groupedColumns>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="a">
                                <mx:AdvancedDataGridColumn headerText="1"/>
                                <mx:AdvancedDataGridColumn headerText="2"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="b">
                                <mx:AdvancedDataGridColumn headerText="3"/>
                                <mx:AdvancedDataGridColumn headerText="4"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="c">
                                <mx:AdvancedDataGridColumn headerText="5"/>
                                <mx:AdvancedDataGridColumn headerText="6"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                </mx:groupedColumns>
        </mx:AdvancedDataGrid>
</mx:Application>



2) with css :- it shows the datagrid with css. the horizontal lines between 
headers at different level is now not distinguishable because its of same color 
as header background. the borderColor property of css.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" 
width="100%" height="100%" backgroundColor="#FFFFFF">
<mx:Style>
        AdvancedDataGrid 
        {
            useRollOver:                false;
            headerColors:               #968f89, #968f89;   
            alternating-item-colors:    #F5F5F5, #EEEEEE;
            backgroundAlpha:            1.0;
            horizontal-grid-lines:      true;
            horizontal-grid-line-color: #cccccc;
            selectionColor:             #99ccff;
            color:                      #000000;
            borderColor:                #968f89;
            text-roll-over-color:       #000000;
            text-selected-color:        #000000;
            headerStyleName:            "advancedDataGridHeader";   
            verticalGridLines:          true;
            rollOverColor:              #808080;
            backgroundDisabledColor:    #FFFFFF;    
            folderOpenIcon:             ClassReference(null);
            folderClosedIcon:           ClassReference(null);  
            defaultLeafIcon:            ClassReference(null);   
        }       
        .advancedDataGridHeader 
        {
            font-weight:                bold;
            color:                      #ffffff;
            useRollOver:                false;
            horizontal-grid-lines:      true;
        }
</mx:Style>
        <mx:AdvancedDataGrid sortExpertMode="false">
                <mx:groupedColumns>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="a">
                                <mx:AdvancedDataGridColumn headerText="1"/>
                                <mx:AdvancedDataGridColumn headerText="2"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="b">
                                <mx:AdvancedDataGridColumn headerText="3"/>
                                <mx:AdvancedDataGridColumn headerText="4"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                        <mx:AdvancedDataGridColumnGroup headerText="c">
                                <mx:AdvancedDataGridColumn headerText="5"/>
                                <mx:AdvancedDataGridColumn headerText="6"/>
                        </mx:AdvancedDataGridColumnGroup>
                        
                </mx:groupedColumns>
        </mx:AdvancedDataGrid>
</mx:Application>




does anyone know how to separate the color of borderColor and the horizontal
lines in the header.

thanks for the help.

Akshar Kaul