Flex DataGrid Header Column Separator

Question

I'm using an mx:DataGrid (in a Halo theme) and I'm having some issues with the header column separators/vertical grid line colors. Does anyone know how to customize/change the line color?

Thanks!

--Moe

Answer 1

Datagrid has two styles horizontalSeparatorSkin and verticalSeparatorSkin style which you can override. It seems you need to override the later.

<mx:DataGrid id="grid" verticalGridLines="true" verticalSeparatorSkin="{VerticalSeparatorSkin}">
        <mx:columns>
            <mx:DataGridColumn dataField="lbl" />
            <mx:DataGridColumn dataField="val"/>
        </mx:columns>
    </mx:DataGrid>

Now you can write this class as:

public class VerticalSeparatorSkin extends ProgrammaticSkin
    {
        public function VerticalSeparatorSkin()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            // draw a line at the bottom of the rectangle defined by
            // unscaledWidth and unscaledHeight
            var g:Graphics = this.graphics;
            g.clear();
            g.lineStyle(3, 0x00FF00); // change thickness / color here
            g.moveTo(0,unscaledWidth);
            g.lineTo(unscaledWidth, unscaledHeight);
        }
    }

This should do the work. Another option is to customize the datagrid itself.

public class MyCustomGrid extends DataGrid
    {
        public function MyCustomGrid()
        {
            super();
        }

        override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void
        {
            var contentHolder:ListBaseContentHolder = s.parent.parent as ListBaseContentHolder;
            var g:Graphics = s.graphics;
            g.lineStyle(3, color); // change the thickness here
            g.moveTo(x, 0);
            g.lineTo(x, contentHolder.height);
        }
    }

And this can be used then in place of regular DataGrid.