Toggle the visibility of separator lines in DataGrid

Question

I need to let the user toggle the visibility of the separator lines between columns and rows in a spark datagrid. I tried to make a method in its skin class to do that (made a new skin class) like this:

<fx:Component id="columnSeparator">
        <s:Line>
            <fx:Script>
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set columnSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            columnSeperatorLine.alpha = 1;
                        }
                        else{
                            columnSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
            </s:stroke>
        </s:Line>
    </fx:Component>

But i cant access that method from the script block of the actual skin, nor when using

    datagrid.skin.columnSeperatorVisible = false;

I dont want to make 4 different skin classes which have different seperator line visibility that i can assign to the datagird, so does any know how i can do this?

I use a custom skin:

<s:SparkSkin 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5" minWidth="89" minHeight="84" xmlns:skins="xxx.xxx.xxx.xxx">

<fx:Metadata>
    <![CDATA[
        /** 
         *  @copy spark.skins.spark.ApplicationSkin#hostComponent
         *
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5
         *  @productversion Flex 4.5
         */
        [HostComponent("spark.components.DataGrid")]
    ]]>
</fx:Metadata>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- @private -->        
    <fx:Component id="alternatingRowColorsBackground">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const colors:Array = dataGrid.getStyle("alternatingRowColors");
                        if (colors && (colors.length > 0))
                        {
                            dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
                            rowBackgroundFillColor.color = colors[rowIndex % colors.length];
                        }
                        else
                        {          
                            // This should be the same as bgFill.color.
                            rowBackgroundFillColor.color = 0xFFFFFF;
                        }
                    }
                ]]>
            </fx:Script>  
            <s:fill>
                <!--- @private -->   
                <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
    </fx:Component>

    <!--- @private -->        
    <fx:Component id="caretIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("caretColor");
                        caretIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
            </s:stroke>
        </s:Rect>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="columnSeparator">
        <s:Line>
            <fx:Script>
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set columnSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            columnSeperatorLine.alpha = 1;
                        }
                        else{
                            columnSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
            </s:stroke>
        </s:Line>
    </fx:Component>

    <!--- 
    Defines the appearance of the drop indicator.
    The DataGrid's layout takes care to size and position the dropIndicator.
    -->
    <fx:Component id="dropIndicator">
        <s:Group>
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:fill>
                    <!--- Defines the color of the background. -->
                    <s:SolidColor color="0xBBBBBB" />
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="0x868686" weight="1"/>
                </s:stroke>
            </s:Rect>
        </s:Group>
    </fx:Component>

    <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
    <fx:Component id="headerColumnSeparator">
        <s:Line>
            <s:stroke>
                <s:SolidColorStroke color="0xFFFFFF" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
    </fx:Component>       

    <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. 
          The default is spark.skins.spark.DefaultGridHeaderRenderer -->
    <fx:Component id="headerRenderer">
        <skins:AirDataGridHeaderRenderer/>
    </fx:Component>






    <!--- @private -->
    <fx:Component id="hoverIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("rollOverColor");
                        hoverIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:fill>
                <!--- @private -->
                <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
            </s:fill>
        </s:Rect>
    </fx:Component>




    <!--- @private -->
    <fx:Component id="rowSeparator">
        <s:Line>
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set rowSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            rowSeperatorLine.alpha = 1;
                        }
                        else{
                            rowSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>


            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="rowSeperatorLine"/>
            </s:stroke>
        </s:Line>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="selectionIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("selectionColor");
                        selectionIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:fill>
                <!--- @private -->
                <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
            </s:fill>                
        </s:Rect>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="editorIndicator">
        <s:Rect>
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>                
        </s:Rect>
    </fx:Component>                    

</fx:Declarations>

<fx:Script fb:purpose="styling">
<![CDATA[
    import mx.events.FlexEvent;
    static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
    static private const contentFill:Array = ["bgFill"];

    /**
     * @private
     */
    override public function get colorizeExclusions():Array {return exclusions;}

    /**
     * @private
     */
    override public function get contentItems():Array {return contentFill};

    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }

    /**
     * @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        if (getStyle("borderVisible") == true)
        {
            border.visible = true;
            background.left = background.top = background.right = background.bottom = 1;
            scroller.minViewportInset = 1;
        }
        else
        {
            border.visible = false;
            background.left = background.top = background.right = background.bottom = 0;
            scroller.minViewportInset = 0;
        }

        borderStroke.color = getStyle("borderColor");
        borderStroke.alpha = getStyle("borderAlpha");

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    /* public function set rowSeperatorVisible(value:Boolean):void
    {
        var test:* = grid.rowSeparator.newInstance();
        test.rowSeperatorVisible = value;
        grid.rowSeparator = test as IFactory;
    }

    public function set columnSeperatorVisible(value:Boolean):void
    {
        var test:* = grid.columnSeparator.newInstance();
        test.columnSeperatorVisible = value;
        grid.columnSeparator = test as IFactory;
    } */

]]>
</fx:Script>

<!-- column header, content -->
<s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">

    <!--- @private
        The GridColumnHeaderGroup's padding values are used to line it up with the Grid
        which is inset by the Scroller's minViewportInset, which provides room for the 
        DataGrid border - the last Rect element below.
    -->
    <s:GridColumnHeaderGroup id="columnHeaderGroup" minHeight="21"
        paddingLeft="1" paddingRight="1" paddingTop="1"
        columnSeparator="{headerColumnSeparator}"
        headerRenderer="{headerRenderer}"/>

    <s:Group height="100%">

        <!--- @private -->
        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>
                <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
                <s:SolidColor id="bgFill" color="#22A86D" />
            </s:fill>
        </s:Rect>

        <!-- header separator, scroller and grid -->
        <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
            <!--- @private -->
            <s:Line id="headerSeparator">
                <s:stroke>
                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
                </s:stroke>
            </s:Line>          

            <!--- @private -->
            <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
                <!--- @private -->
                <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
                    <s:gridView>
                        <fx:Component>
                            <s:GridView>
                                <s:GridLayer name="backgroundLayer"/>
                                <s:GridLayer name="selectionLayer"/>
                                <s:GridLayer name="editorIndicatorLayer"/>                            
                                <s:GridLayer name="rendererLayer"/>
                                <s:GridLayer name="overlayLayer"/>
                            </s:GridView>
                        </fx:Component>
                    </s:gridView>
                </s:Grid>                    
            </s:Scroller>
        </s:VGroup>

    </s:Group>

</s:VGroup>

<!-- border -->
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1"/>
    </s:stroke>
</s:Rect>    

And this code changes the visibility

var overlayLayer:GridLayer = (this.grid.getChildByName('overlayLayer') as GridLayer);
if(overlayLayer){
    overlayLayer.visible = Global.stringToBoolean(item.value);
}

Answer 1

Column and row separators are located on overlayLayer of the grid. So, the way to toggle their visibility is:

var overlayLayer:GridLayer = dataGrid.grid.getChildByName('overlayLayer');
overlayLayer.visible = !overlayLayer.visible;

If you're using custom skin, make sure overlayLayer is present in your skin. You can copy all the layers from SDK skin:

<s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
    <s:GridLayer name="backgroundLayer"/>
    <s:GridLayer name="selectionLayer"/>
    <s:GridLayer name="editorIndicatorLayer"/>                            
    <s:GridLayer name="rendererLayer"/>
    <s:GridLayer name="overlayLayer"/>
</s:Grid>   

For SDK 4.10 try DisplayObjectContainer(dataGrid.grid.getElementAt(0)).getChildByName('overlayLayer').visible = ...