I recently ran into a problem that held me up for a little while, although it seemed like it would be a simple problem. After searching around and finding the solution, I found that it is actually pretty simple, just not obvious. Since it took me a while to find the answer, I thought it would be good to share my new found knowledge with the world.

In the AdvancedDataGrid column headers, there are these vertical lines that separate the header text from the sort controls.I wanted to get rid of them since I wasn’t interested in allowing the user to sort on multiple columns and I could use the extra space for the header text.

I found headerSeparatorSkin but that is for the lines that separate the header cells. What I needed was headerSortSeparatorSkin. The tricky thing is you can’t just set it to null. You have to set it to mx.skins.ProgrammaticSkin.

This got rid of the line but still left the space there that crowded the header text. Getting rid of this required setting sortExpertMode to true. This didn’t seem intuitive to me, but after reading a little about it, I guess it makes some sense.

So, when I was done, I had this for my mxml tag:

1

<mx:AdvancedDataGrid sortExpertMode="true"

                     headerSortSeparatorSkin="mx.skins.ProgrammaticSkin">

Beautiful in it’s simplicity!