adobe flex datagrid selectable columns

2
votes

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:

thunderbird_datagrid.png

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:

thunderbird_select_columns.png

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 figure 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
1
apache-flexdatagridselectable
Hi Ian, I've done a lot of work with ADG myself and found that for getting this kind of control your going to end up having to create an extension of ADG if you haven't already and will need to override some of the methods for example look at the AS3 language reference protected methods: drawColumnBackground, drawHeaderBackground, also to note you may be able to cheat this if you use the last column before the scrollbar as the container to put the PopupMenu into and just have it drawn outside of it's width and turn off clipping. – shaunhusain

1 Answers

1
votes

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?