background color disappears when scrolling horizontally in advance datagrid in flex
Hi,
I am tring to set color in 3 columns in advance data grid using "setStyle" function and i am able to do it successfully. But as soon as i scroll horizontally background color disaapears.
In the image "beforeScroll.PNG" the 3 columns header1, header2 and header3 are having background color grey which is good. But when i scroll the datagrid horizontall(see "after-1st-Hscroll.PNG") color from header2 disappears and on the 2nd scroll(see "after-2st-Hscroll.PNG") color from header 3 also disappears.
I am using sdk 4.6.0
beforeScroll
after-1st-Hscroll
after-2st-Hscroll
Please find my code below:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="onComplete()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
private function onComplete():void{
var colsArr:Array=new Array();
var column1:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column1.headerText="Header1";
column1.setStyle("backgroundColor","0xcccccc");
colsArr.push(column1);
var column2:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column2.headerText="Header2";
column2.setStyle("backgroundColor","0xcccccc");
colsArr.push(column2);
var column3:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column3.headerText="Header3";
column3.setStyle("backgroundColor","0xcccccc");
colsArr.push(column3);
var column4:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column4.headerText="Header4";
colsArr.push(column4);
var column5:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column5.headerText="Header5";
colsArr.push(column5);
sampleDG.columns=colsArr;
var column6:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column6.headerText="Header6";
colsArr.push(column6);
sampleDG.columns=colsArr;
var column7:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column7.headerText="Header7";
colsArr.push(column7);
sampleDG.columns=colsArr;
var column8:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column8.headerText="Header8";
colsArr.push(column8);
sampleDG.columns=colsArr;
var column9:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column9.headerText="Header9";
colsArr.push(column9);
sampleDG.columns=colsArr;
var column10:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column10.headerText="Header10";
colsArr.push(column10);
sampleDG.columns=colsArr;
var column11:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column11.headerText="Header11";
colsArr.push(column11);
sampleDG.columns=colsArr;
var column12:AdvancedDataGridColumn=new AdvancedDataGridColumn();
column12.headerText="Header12";
colsArr.push(column12);
sampleDG.columns=colsArr;
}
]]>
</fx:Script>
<mx:Box horizontalAlign="center" width="100%">
<mx:AdvancedDataGrid id="sampleDG" rowCount="3" width="70%" horizontalScrollPolicy="on" height="300"/>
</mx:Box>
</s:Application>
