Changing the header separator on a mx:DataGrid

I've been asked this numerous times...

How do you get rid of (or change) the vertical lines on the header of a mx:DataGrid? I know how to get rid of the horizontal and vertical gridlines on a datagrid using CSS/styles for the mx:DataGrid control, but just can't get the header lines to go away.

... And here is the quick and easy answer: There are many ways to do this. Looking at the API documentation for the mx:DataGrid control, you will see that there is a css style called "headerSeparatorSkin". The headerSeparatorSkin style defines the skin that is used to render the vertical line that separates the column headers in the datagrid control. The quickest and easiest way to get rid of those header separator lines was to change the header separator skin to a tansparent gif (or png) image.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send();"> 

	<mx:Style source="/styles.css" />
	
	<mx:DataGrid 
		id="dg" 
		dataProvider="{feedRequest.lastResult.rss.channel.item}" 
		top="0" bottom="0" left="0" right="0" 
		headerSeparatorSkin="@Embed('/assets/transparent.gif')" >
		
		<mx:columns>
			<mx:DataGridColumn headerText="Posts" dataField="title"/>
			<mx:DataGridColumn headerText="Date" dataField="pubDate"/>
		</mx:columns>
	
	</mx:DataGrid>
	
	<mx:HTTPService 
		id="feedRequest"  
		url="http://www.cynergysystems.com/blogs/rss/andrewtrice" 
		useProxy="false"   />
	
</mx:Application>

As I said before, that is not the only way to get rid of the header separator skin. You could also create a custom class (skin) that handles the drawing of the separator. In this class, basically tell it to do nothing, rather than drawing the actual separator. You'll notice that the rendered swf looks identical, but the code is slightly more complicated.

The code for the main functionality of this demo is exactly the same as the code above, except for one line:

headerSeparatorSkin="skin.DataGridHeaderSeparator"

This instructs the Flex application to use my skin.DataGridHeaderSeparator class to draw the header separator object, instead of using the default mx.skins.halo.DataGridHeaderSeparator object; Now, here is the code for my skin.DataGridHeaderSeparator class. You can see that I have overridden the measuredWidth property to always return 0 and the setActualSize function to clear the graphics for this component.

package skin
{
	import mx.skins.halo.DataGridHeaderSeparator;
	
	public class DataGridHeaderSeparator extends mx.skins.halo.DataGridHeaderSeparator
	{
		override public function get measuredWidth():Number
		{
			return 0;
		}
		
		override public function setActualSize(newWidth:Number, newHeight:Number):void
		{
			graphics.clear();
		}
	}
}

The second approach acutally has a slightly smaller file size, since it does not need to embed the 1x1 pixel transparent gif image.

Now, you can use this same approach to re-style your datagrid component's header separators. For instance, you could have images as the separators instead of just "the lines".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send();"> 

	<mx:Style source="/styles.css" />
	
	<mx:DataGrid  
		id="dg" 
		dataProvider="{feedRequest.lastResult.rss.channel.item}" 
		top="0" bottom="0" left="0" right="0" 
		headerSeparatorSkin="@Embed('/assets/fx.png')" >
		 
		<mx:columns>
			<mx:DataGridColumn headerText="Posts" dataField="title"/>
			<mx:DataGridColumn headerText="Date" dataField="pubDate"/>
		</mx:columns>
	
	</mx:DataGrid>
	
	<mx:HTTPService 
		id="feedRequest"  
		url="http://www.cynergysystems.com/blogs/rss/andrewtrice" 
		useProxy="false"   />
	
</mx:Application>

Another possibility is that you could use the drawing API to draw an item as the header separator, instead of the default lines.

package skin
{
	import mx.skins.halo.DataGridHeaderSeparator;
	import flash.display.Graphics;
	
	public class DataGridHeaderSeparator2 extends mx.skins.halo.DataGridHeaderSeparator
	{
		override public function get measuredWidth():Number
		{
			return 11;
		}
		
		override public function setActualSize(newWidth:Number, newHeight:Number):void
		{
			var g:Graphics = graphics;
			
			g.clear();
		
			g.beginFill(0xFF0000);
			g.moveTo(0,0);
			g.lineTo(11, 0);
			g.lineTo(6,19);
			g.lineTo(0,0);
			g.endFill();
		}
	}
}

Really, this post just touches on a bigger picture: Flex skinning. Any component that has a skin can be re-skinned in these ways. "Skin by images" and "Skin by actionscript". For more on Flex skinning, be sure to check out these links.

• http://www.flex.org/ACDS/FlexSkinsAndThemes.pdf
• http://www.adobe.com/devnet/flex/quickstart/skinning_components/

This is just scratching the surface on Flex skinning, you can expect much more on this in the future.

• View Examples Source
• Download Examples Source