adobe flex datagrid selectable columns

I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.

Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:

In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:

Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.

I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figur开发者_C百科e out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.

• Ian

One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?