Altering the appearance of an AdvancedDataGridColumn and mx:ToggleButtonBar in flex

I have two things I wish to change with the display elements in flex.

The first on relates to and AdvancedDataGridColumn in a AdvancedDataGrid. This is shown in the picture URL with the words "Word Student Teacher ..." These are the headertext of an AdvancedDataGrid. I want to remove the little "1" symbol and disable the abiliy to click on the column and have them sort.

The second is also shown in the picture and it relates to the mx:ToggleButtonBar shown with the text "Pronunciation Pitch Timing Loudness" At present "Pronunciation" is selected, but is is possible to make this clearer? For example have the currently selected tab show in a different color?

Picutre URL: (Sorry but stackoverflow won't let me attache the pic, so I need to post a link)

Thanks Thor


1) Have you tried the sortableColumns property of AdvancedDataGrid?

2) The ToggleButtonBar class has a buttonStyleName style that specifies the name of the CSS style that is used for the buttons in the button bar. Using that, you can set the selected skin styles for the buttons in your button bar. Example:

@namespace mx "library://";

mx|ToggleButtonBar {
  buttonStyleName: "myButtonStyle";

.myButtonStyle {
  selectedUpSkin: /* whatever */;
  selectedOverSkin: /* whatever */;
  selectedDownSkin: /* whatever */;

ToggleButtonBar also has a selectedButtonTextStyleName style that you can use in the same way if you want to change the text styles:

@namespace mx "library://";

mx|ToggleButtonBar {
  selectedButtonTextStyleName: "myTextStyle";

.myTextStyle {
  color: #ff0000;

Need Your Help