1 Reply Latest reply on Oct 12, 2012 8:06 AM by chetan119

    background color disappears when scrolling horizontally in advance datagrid in flex

    chetan119 Level 1

      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

      beforeScroll.PNG

       

      after-1st-Hscroll

       

      after-1st-Hscroll.PNG

       

      after-2st-Hscroll

      after-2nd-Hscroll.PNG

       

       

      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>