3 Replies Latest reply on Apr 24, 2014 3:01 AM by m_mfsi

    Misalignment of Header column separator and column separator in mx:DataGrid.


      Hi All,


      I'm using a mx:DataGrid control in my extension project for InDesign CS5/CS55.5/CS6. I've customized some style attributes of DataGrid to change its look and feel as shown in following image.


      Issue: As we see in image that after changing these style attributes the header column separator is not aligned with column separator of DataGrid body (more clearly shown in following zoomed image).


      I've also found that if I remove the 'headerColors' property then it looks fine(may be due to camouflaging of white separator line with default color of header as shown in image below.)


      Any suggestion/workaround to fix this misalignment.


      Note that I must use this dark colored look and feel. I've used FlashBuilder4.6, ExtensionBuilder2.1, ExtensionBuilder 3.4 SDK on Mac OS X 10.7.5.


      The following is the source code,


      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" historyManagementEnabled="false"  applicationComplete="colorSync()" creationComplete="creationCompleteHandler(event)">



            import mx.collections.ArrayCollection;

            import mx.events.FlexEvent;



            private var itemsObject:ArrayCollection = new ArrayCollection();


            public function colorSync():void{




            protected function creationCompleteHandler(event:FlexEvent):void


              itemsObject.addItem({'page':'Page 01','status':'Ready','remark':'high quality'});

              itemsObject.addItem({'page':'Page 02','status':'Wait','remark':'low quality'});

              itemsObject.addItem({'page':'Page 03','status':'Ready','remark':'high quality'});

              itemsObject.addItem({'page':'Page 04','status':'Ready','remark':'high quality'});

              itemsObject.addItem({'page':'Page 05','status':'Wait','remark':'low quality'});

              itemsObject.addItem({'page':'Page 06','status':'Ready','remark':'high quality'});

              itemsObject.addItem({'page':'Page 07','status':'Ready','remark':'high quality'});







            mx|DataGrid {

              headerColors: #333333, #333333;

              alternatingItemColors: #222222,#252525;

              textRollOverColor: #FFFFFF;

              textSelectedColor: #FFFFFF;

              color: #CDCDCD;

              borderStyle: solid;

              rollOverColor: #333333;

              selectionColor: #444444;

              border-color: #222222;

              textSelectedColor: #ffffff;

              dropShadowEnabled: false;

              cornerRadius: 4;




        <mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">

            <mx:Spacer height="10" width="100%"/>

            <mx:DataGrid id="pageDataGrid" dataProvider="{itemsObject}" verticalAlign="middle" width="100%" buttonMode="true" height="100%">


                  <mx:DataGridColumn dataField="page" headerText="Page" width="50"/>

                  <mx:DataGridColumn dataField="status" headerText="Status" width="50"/>

                  <mx:DataGridColumn dataField="remark" headerText="Remark" width="100"/>






        • 1. Re: Misalignment of Header column separator and column separator in mx:DataGrid.
          Harbs. Level 6

          I'm not positive, but I believe the the vertical lines are two-tone -- two pixels wide. I'm not sure where those colors are set, but that's probably where you need to look...

          • 2. Re: Misalignment of Header column separator and column separator in mx:DataGrid.
            Harbs. Level 6

            You might want to check out the DataGridHeaderSeparator class. The simplest solution might be to create a new one and set the headerSeparatorSkin style to the new class. Alternatively/additionally, you can specify a verticalSeparatorSkin...

            1 person found this helpful
            • 3. Re: Misalignment of Header column separator and column separator in mx:DataGrid.
              m_mfsi Level 1

              Correct, the header separator is 2 pixels wide and that's why it doesn't aligned with body separator which is only 1 pixel wide.


              Thanks. I solved the problem by adding a 'Programmatic Skin' based on 'mx.skins.halo.DataGridHeaderSeparator' which I set for 'headerSeparatorSkin' property of mx:DataGrid.


              I also tried by adding a 'Graphical Skin' using a PNG image file with a 1x22 pixel wide line. This fixed the misalignment but caused another issue due to which the last separator becomes 2 pixel wide while all others were 1 pixel wide.


              I'm posting my code snippets here for others,


              1. Add a new MyDataGridHeaderSeparator.mxml file for programmatic skin as follows(say in package View.skin),


              <?xml version="1.0" encoding="utf-8"?>

              <haloSkins:DataGridHeaderSeparator xmlns:mx="http://www.adobe.com/2006/mxml"






                    * Overriden this to draw the separator lines within DataGrid header columns. Since the default

                    * implementation was causing 2 issues when headerColors style property of DataGrid is changed

                    * to match with overall extension's dark color theme,

                    * 1. Misalignment of header separator with body separator.

                    * 2. Drawing separator lines of 2 pixels with first in light grey color and other in dark grey.


                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                       // Set line width to 1 pixel to draw separator lines 1 pixel wide.


                       // Move from x=0 to x=1 to fix misalignment issue.

                       graphics.moveTo(1, 0);

                       // Draw separator line from (1,0) to (1,unscaledHeight).

                       graphics.lineTo(1, unscaledHeight);








              And then simply set the 'headerSeparatorSkin' property of mx:DataGrid to this skin, for example inline setting property as below,


              <mx:DataGrid id="myDataGrid" headerSeparatorSkin="View.skin.MyDataGridHeaderSeparator">