Removing Grid Lines from Spark DataGrid Skin

Creating a datagrid with no column or row seperator lines is just a matter of creating a new DataGrid skin and applying it to the DataGrid.

The first thing to do is to create a new MXML class (BlankDataGridSkin.mxml) which extends the spark “DataGridSkin” class.  Essentially, we’ll be extending the basic DataGridSkin and overriding two components:

1. columnSeparator

2.  rowSeparator

The code to override those two components follows:

<spark:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:spark="spark.skins.spark.*">
  <fx:Declarations>
    <fx:Component id="columnSeparator">
      <s:Line/>
    </fx:Component>
    <fx:Component id="rowSeparator">
      <s:Line/>
    </fx:Component>
  </fx:Declarations>
</spark:DataGridSkin>

Pretty simple, right? If we wanted to change the appearance of the seperators all we would need to do is change around what is drawn by the components. For instance, if we wanted red seperator lines we could write components like this:

<fx:Component id="columnSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>
<fx:Component id="rowSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>

Now, how do we apply our new skin? Thankfully, that’s pretty simple too. All we need to do is define our new class as the skinClass of a DataGrid. That code looks like this:

<s:DataGrid skinClass="BlankDataGridSkin">
  <s:columns>
    <s:ArrayCollection>
      <s:GridColumn headerText="Header 1" width="200"/>
      <s:GridColumn headerText="Header 2" width="200"/>
      <s:GridColumn headerText="Header 3" width="200"/>
    </s:ArrayCollection>
  </s:columns>
</s:DataGrid>

That’s pretty much everything. Now you should have a datagrid where you can completely define what the seperators look like.

Below, you can see an example of the DataGrid with no seperator lines with view source right click enabled.