Flex - Customizing ContextMenu for the Application and for datagrid

In this example two contextMenu is used, one for the Application and one for the datagrid alone.

These can be done using ContextMenu

-- Use print in the contextMenu

-- Hide Builtin menus in contextMenu

-- Use only the needed builtin menus contextMenu

For the application we are using a contextMenu with print option and for the datgrid we are using a different contextMenu with a custom option called View Color.

If we click the View Color option in the contextMenu means the selected color will be assigned as a backgroundColor for the box below the datagrid.

As we applied a contextMenu with print option for the Application, this contextMenu will be shown whenever you are right clicking inside the application expect datagrid portion.


     Code:

private function init():void {
 setContextMenu();
 var cmi:ContextMenuItem = new ContextMenuItem("View color", true);
 cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemSelect);
 cm = new ContextMenu();
 cm.hideBuiltInItems();
 cm.customItems = [cmi];
 cm.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelect);
}

private function menuSelect(evt:ContextMenuEvent):void {
 table.selectedIndex = lastRollOverIndex;
}

private function menuItemSelect(evt:ContextMenuEvent):void {
 var obj:Object = table.selectedItem;
 colorBox.setStyle("backgroundColor",obj.@color.toString());
}

private function setContextMenu():void{
 customContextMenu = new ContextMenu();
 customContextMenu.hideBuiltInItems();
 var defaultItems:ContextMenuBuiltInItems = Application.application.contextMenu.builtInItems;
 defaultItems.print=true;
}

Download the full code from this link download the source code
View this video for seeing how it is running



Download the full code from this link download the source code