Adding A ContextMenu To A Flex Tree

I’ve been working on an AIR application for managing SQLite databases where I’ve been using the Flex Tree component to list out all databases. I’ve been having a hard time finding good resources on working with a ContextMenu (right click menu) on a Tree component.

I tried my luck on adding a ContextMenu to the Tree component itself and managing it there. But that idea went sour because I couldn’t find a way to get the current Tree item selected since right-clicking doesn’t actually select it. After checking out what others have done, this wasn’t getting any easier because I wasn’t convinced by the solutions provided. They seemed more like hacks when I knew this should be pretty simple.

It never occurred to me to try adding the ContextMenu on a Tree ItemRenderer, so when I originally thought of it, I figured eureka, that’s it! Ultimately, though, I didn’t think it through that well since adding a renderer would also remove the folding arrows and folder/leaf icons. Ouch! Although now I know what was needed, I realized that adding a TreeItemRenderer is not the same as another List-based renderer such as one for a DataGrid or List component.

After following the solution on the Flex Cookbook, I dropped in that demo item renderer and was able to attach a ContextMenu object to it in the renderer constructor. So something like this:

public function DatabaseListRenderer()
{
super();
var contextMenu:ContextMenu = new ContextMenu();
var menuItems:Array = [];
var edit:ContextMenuItem = new ContextMenuItem("Edit Name");
edit.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, databases_menuItemSelectHandler);
menuItems.push(edit);
contextMenu.customItems = menuItems;
this.contextMenu = contextMenu;
}
private function databases_menuItemSelectHandler(event:ContextMenuEvent):void {
trace("menu item selected: " + data);
}

Now when I right-click on a particular item and select a menu option, the event handler fires and I see my trace message. Notice I dump out the data to see what’s there (debugger is a better place for this) and I see the data for that specific Tree item as if it were selected. Problem solved!