Toggling a DataGrid control’s horizontal grid lines and vertical grid lines

OK, this is a pretty neat trick. Flex makes it pretty easy to customize the look and feel of the DataGrid. For example, the following code lets you toggle the data grid’s horizontalGridLines and verticalGridLines styles on or off, change the alternating row background colors so each row is a plain white, and sets the horizontalGridLineColor and verticalGridLineColor styles to red.

Full code after the jump.

The following example sets the horizontal and vertical grid lines to red, disables the alternatingItemColors style by setting it to white, and controls the horizontalGridLines and verticalGridLines styles by using two CheckBox controls:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/23/toggling-a-datagrid-controls-horizontal-grid-lines-and-vertical-grid-lines/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="item 1" data="1" />
        <mx:Object label="item 2" data="2" />
        <mx:Object label="item 3" data="3" />
        <mx:Object label="item 4" data="4" />
        <mx:Object label="item 5" data="5" />
        <mx:Object label="item 6" data="6" />
        <mx:Object label="item 7" data="7" />
        <mx:Object label="item 8" data="8" />
        <mx:Object label="item 9" data="9" />
        <mx:Object label="item 0" data="0" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl" source="{arr}" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            alternatingItemColors="[white]"
            rowCount="6"
            horizontalGridLines="{hGL.selected}"
            verticalGridLines="{vGL.selected}"
            horizontalGridLineColor="red"
            verticalGridLineColor="red">
        <mx:columns>
            <mx:DataGridColumn id="labelCol" dataField="label" />
            <mx:DataGridColumn id="dataCol" dataField="data" />
        </mx:columns>
    </mx:DataGrid>

    <mx:CheckBox id="hGL" label="horizontalGridLines" selected="true" />
    <mx:CheckBox id="vGL" label="verticalGridLines" selected="true" />

</mx:Application>

View source is enabled in the following example.