I saw this question come up on a list today and thought this was pretty handy. Plus, I think it is the first time I’ve had a chance to play with the ContextMenu and ContextMenuItem classes in Flex in quite a while.
The following example pops up a custom context menu when the user right-clicks on an item in an data grid. After selecting the custom item (”View item…”) from the context menu an Alert control is displayed showing the selected item’s properties.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/using-a-custom-context-menu-with-the-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var cm:ContextMenu;
private var alert:Alert;
private function init():void {
var cmi:ContextMenuItem = new ContextMenuItem("View item...", true);
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.customItems = [cmi];
cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
}
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
dataGrid.selectedIndex = lastRollOverIndex;
}
private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
var obj:Object = dataGrid.selectedItem;
alert = Alert.show("Property A: " + obj.@propertyA + "\n" + "Property B: " + obj.@propertyB, obj.@label, Alert.OK);
}
]]>
</mx:Script>
<mx:XML id="itemsXML">
<items>
<item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" />
<item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" />
<item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" />
<item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" />
<item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" />
<item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" />
<item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" />
<item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" />
</items>
</mx:XML>
<mx:Number id="lastRollOverIndex" />
<mx:DataGrid id="dataGrid"
width="400"
dataProvider="{itemsXML.item}"
contextMenu="{cm}"
itemRollOver="lastRollOverIndex = event.rowIndex">
<mx:columns>
<mx:DataGridColumn id="labelCol"
dataField="@label"
headerText="Label:" />
<mx:DataGridColumn id="propACol"
dataField="@propertyA"
headerText="Property A:" />
<mx:DataGridColumn id="propBCol"
dataField="@propertyB"
headerText="Property B:" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="{dataGrid.selectedItem.@label}" />
</mx:Application>
View source is enabled in the following example.
Thanks for posting this. When I copied your code into a Flex Builder MXML project and run it in FireFox I get a weird behavior. When I right click on a grid item, the item that is selected in the Alert box is the next item below the one I right-clicked on. This page works fine in FireFox, but when I just run the example code in FireFox from Flex Builder I get the strange behavior. I’m using FireFox 2.
Bruce,
Are you using Flex 2 or Flex 3? (and if Flex 2, which Hotfix (if any) are you using)
I only tested on Flex 3, so maybe there is a slight difference between the two versions.
Peter
Thanks for that…the rightClick doesn’t function / react on Mac OSX Safari 3 Beta.
Best regards
Charly
Peter,
nice idea to use {cm} in MXML designer, we were used to install the custom item from AS code :-)
But we could not deal with Right-Click menu for hyper-links AT ALL. If you use a textarea with a hyper-link, hyperlink context menu always contains 3 items: “Copy link”, “Open link”, “Open link in a new window”.
Haven’t you managed to add custom items there?
Is it possible to implement an itemeditor not directly in the datagrid but over it (like a modal window)?
Good , Can we create right click option on a image then at runtime user can cut copy paste the image …..
Great post, i find good stuff here about flex, which i find very good to me.
thanks
Pls give details about custom view
THe COde is too good for me…
thanks
thanks….
great coding in flex
Can we totally remove the default menu containing the settings and about flash player items?
Susrut Mishra,
No, sorry.
Peter
Thank you,
Was wondering how we can extend this with more menu items…
regards,
Dipak
No worries, got it figured out…
nice and simple. thnx for sharing.
I ran into the same issue with Flex2, wrong item being selected when right-clicking. This seem to have fixed it:
itemRollOver=”lastRollOverIndex = event.rowIndex - 1″
hello,
when i’m trying to implement your code exactly as showed here, i get a strange bug.
When i right click in my datagrid, the context menu appears but there is no MENU_SELECT event triggerd ( I’ve wrote a trace in the contextMenu_menuSelect function ) my last row index number changes on itemRollovers but because the MENU_SELECT seems not to be triggerd, my selected index does not change.
the strange thing is that when i click on ”view item” he suddenly shows the trace but it doesn’t make sense for me because it should only trigger the MENU_ITEM_SELECT event
here is the code i use maybe i’m doing something wrong
var cmi:ContextMenuItem = new ContextMenuItem(”View item”, true);
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
cmLibrary = new ContextMenu();
cmLibrary.hideBuiltInItems();
cmLibrary.customItems = [cmi];
cmLibrary.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
trace(”right clicked”);
Library.selectedIndex = lastRollOverIndex;
}
private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
var obj:Object = Library.selectedItem;
trace(obj.artist);
}
NOTE: even when i put the MENU_ITEM_EVENT listener in comments: the MENU_SELECT event is being triggerd when i click on View Item
Can anyone help out?
grtz Thomas
Can we create right click option on a image then at runtime user can cut copy paste the image pls any specify me soon.
thanks
Posin,
I don’t believe you can. You should be able to create a custom context menu item for an Image control, and then you could copy the URL of an image to the system clip board, but I don’t believe you can copy the actual image/pixels. Of course, I could very well be wrong, so you may want to ask on a high-traffic list like FlashCoders or FlexCoders and see if anybody else has attempted something like this before.
Sorry,
Peter
This page works fine in FireFox, but when I just run the example code in FireFox from Flex Builder I get the strange behavior so what can i do for that pls send me detials. thanks
I tried to add a few context menu items today, found out that names: “Open” and “Delete” are not allowed.
link to a work around: http://polygeek.com/373_adobeflash_flash-context-menu-doesnt-allow-delete
“appending a no break space to the end of the word”
how can we put an icon in to context menu
nice example. this helped a lot!
Hi,
Has anyone tried adding a submenu to the ContextMenu added on the data Grid? The flex-3 documentation mentions a function ‘addSubmenu’ in the ContextMenu class, using which it is possible to implement nested contextmenus in flex. But, the problem here is that the flex-3 builder does not support that class yet.
I am currently using Demo version of Flex-3. Would purchasing the license and then executing the same code fix the problem?
Ravi,
I believe the
addSubmenu()method is for AIR applications only.Peter
if we can not remove default context menus like “setting..” its a main problem
Great job Bruce,
Is there a way to remove
*Settings and
*About Flash Player
If there is please let me know…
It wood look more simple on the application.
Regards.
Good work.found it very useful. But did any one try putting more than one options in the context menu?
I’ve been working on my first serious flex app. I can’t tell you how many times my googling has lead me to your blog, and how helpful it has been. You’re my hero.
What this line is for?
cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
I read that the ContextMenu API does not support submenus. They actually said that was its biggest drawback.
Is it possible to put an icon next the ContextMenuItem?
Usually it’as V to show the option is activated.
thanks
Adrien
Great post!
Not being able to remove Settings …, About .. and the all-important Download this vidio … are major drawbacks, not to mention having control over formatting of the menu.
Right click support is Flex’s biggest weakness IMO. Has anyone noticed that if the user left clicks a control such as a spinner, then right clicks at the same time, the program can no longer capture the MouseUp event on the left mouse button? The spinner keeps spinning as if you still had the left click button depressed even if you let go of the mouse. I have found no good way to prevent this (and am not fond of putting an opaque html layer over the entire Flex application).
It makes no sence that right click handling is restricted to Adobe Air.
Even JavaScript allows us to capture the right click event.
Many thanks for your code