Thursday, April 2, 2009

Removing column header separator lines (flex)

This took me a while to figure out so I thought I would post it on here just in case someone else is having the same problem.

I have an Advanced Data Grid, but I don't want any separator lines between the headers. There are 2 styles and 1 property you need to set in an AdvancedDataGrid to make this happen.



The styles are:
header-separator-skin
header-sort-separator-skin

The property is:
sortExpertMode

I figured setting the styles to "null" would work, but it doesn't.

Here is what you need to do:

headerSortSeparatorSkin="mx.skins.ProgrammaticSkin"
headerSeparatorSkin="mx.skins.ProgrammaticSkin"
sortExpertMode="true"


Or if you'd rather set the styles in CSS:

header-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");
header-sort-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");


Sample with source

Thanks to http://theflexguy.com/index.php?option=com_idoblog&task=viewpost&id=104&Itemid=54 for your post on this!

9 comments:

NandoLins said...

thank´s a lot!! i was stucked on it, i was simply adding invisible skins but that won´t free the cell space :P
your solution fits perfectly, great job!

mauricen said...

Just what I wanted - cheers!

Anonymous said...

Thanks for posting. Helped me before losing all hair ;-) They should have a style instead of skin only...

Anonymous said...

Thanks a lot - saved me probably some hours!

Anonymous said...

How do you get rid of the horizontal line separating the header and data?

Abhishek Khandelwal said...

Very nice!! Great Job!

Chenthil said...

Thanks a lot.
Any idea on how to restore it (back to original skin)?

Anonymous said...

Awesome... I wasted hours to get this done.. Perfect !!! Thanks a lot..

Anonymous said...

Thanks a lot it saved my time.