Close
Back

Using ContextMenu with Vaadin 7.6

Although Vaadin ContextMenu was published as a separate add-on in Directory, we tend to consider it as a feature of the recent 7.6 release. The latest minor release added essential hooks that make it simple to catch raw “contextmenu” events and build components that take the advantage of them.

As an add-on, we can be more agile developing ContextMenu further during its early life, but still share it for you to take the full advantage of it. To start using it, just add the following dependency to your project and re-compile your widgetset.

 
<dependency>
  <groupId>com.vaadin.addon</groupId>
  <artifactId>vaadin-context-menu</artifactId>
  <version>CHECK THE LATEST VERSION FROM vaadin.com/directory</version>
</dependency>

As the first version of the add-on was based on, or at least highly inspired by, Peter Lehto’s popular ContextMenu add-don, it is already pretty complete. Features include:

  • Dynamic, hierarchical context menus

  • Icon support

  • Check/uncheck menu items

  • Keyboard navigation

  • Special item and property support for Grid, Table and TreeTable

Manual and JavaDocs are not yet available, but the API mimics the MenuBar component in Vaadin and it is pretty self-documenting. Below you can see a simple usage example with three different kind of menu items:

// Create a context menu for 'someComponent'
ContextMenu menu = new ContextMenu(someComponent, true);

// Basic menu item
final MenuItem basic = menu.addItem("Basic Item", e -> {
    Notification.show("Action!");
});
basic.setIcon(FontAwesome.AUTOMOBILE);

// Checkable item
final MenuItem checkable = menu.addItem("Checkable", e -> {
    Notification.show("checked: " + e.isChecked());
});
checkable.setIcon(FontAwesome.ANCHOR);
checkable.setCheckable(true);
checkable.setChecked(true);

// Disabled item
final MenuItem disabled = menu.addItem("Disabled", e -> {
    Notification.show("disabled");
});
disabled.setEnabled(false);
disabled.setIcon(FontAwesome.AMBULANCE);

The add-on works with virtually any Vaadin components. It can even be hooked to third party add-ons pretty easily. With simple components, there is nothing special you need to do and in more complex cases you can programmatically ask ContextMenu to be shown in a specific location. See for example this code example, where we open a ContextMenu on top of a Leaflet based Map component and use the real location information in the menu action.

We hope you find it useful and post bug reports and enhancement requests (and pull requests!) to the add-on’s Github page.

Try Vaadin ContextMenu now!

Comments
Add Comment
Great stuff. Have been using it in production now for two weeks. I use it as way to add right-click menu on rows in a Grid component. When used with Grid (or Table I suppose) there's a minor usability issue in that it can be difficult for the user to figure out visually which row he has right-clicked (https://github.com/vaadin/context-menu/issues/23) but this problem is not more serious than I've actually used the add-on in released production code. :-)
Posted on 3/30/16 5:32 AM.
For your usability issue: You can fix that in code. gridContextMenu.addGridBodyContextMenuListener(myEventListener)
On event, make sure that the itemId from the event is selected. If not, replace any existing selection with just this item.
Posted on 4/7/16 1:39 PM in reply to Peter Hansson.
The usability issue tracked in #23 is about focus, not about selection. Both concepts have a visual indicator but they are not the same, concept-wise.
Posted on 4/11/16 7:23 PM in reply to Guttorm Vik.
I upgraded project from Vaadin 7.2 to most recent 7.6.5. PagedTable actions menu did not work properly and that way I came across this component. That one does not show up, through, printing to browser console:
com.vaadin.DefaultWidgetSet-0.js:6170 Mon May 09 14:34:14 GMT+300 2016 com.vaadin.client.communication.MessageHandler
SEVERE: Error performing server to client RPC callsjava.lang.IllegalStateException: There is no information about com.vaadin.addon.contextmenu.client.ContextMenuClientRpc.showContextMenu. Did you remember to compile the right widgetset?
... stack here ...
Caused by: com.vaadin.client.metadata.NoDataException: There are no parameter type data for com.vaadin.addon.contextmenu.client.ContextMenuClientRpc.showContextMenu
... stack here ...

What could be an issue here? Rest of the stuff works just fine.
Posted on 5/9/16 11:40 AM.
Great stuff. Is there any possibility to add hotkeys for MenuItems?
Posted on 5/20/16 9:07 AM.
Very good stuff!

I upgraded to Vaadin 7.6.8 and ContextMenu 0.7.3 addon applied on Tree component (item level) after encountering a very annoying problem when using Action handlers with Vaadin versions 7.6.5-7.6.8.

It looks like Tree Action handler will easily get somehow out-of-sync if you repeatedly press mouse right button multiple times. The action menu then flashes but you cannot select anything. Only page reload clears the situation. I have not been able to reproduce this with Vaadin 7.6.4 (e.g. currently in use in Vaadin Sampler).

ContextMenu works as a good replacement for Action handlers and hopefully be part of Vaadin core, soon.

Only problem I encountered with ContextMenu addon when using on Tree component was that the Tree need to be created with no parameters in constructor to avoid "... no RPC implementation is registered" -error. This has been notified on German speaking forum - see https://vaadin.com/forum#%21/thread/13055164, too.
Posted on 8/2/16 1:02 PM.
How does the Special Item Support for TreeTables work?
Posted on 8/4/16 1:55 PM.
seems like it doesnt work well with springboot. i have the same problem like in this post https://vaadin.com/forum#!/thread/13837668/13909417
Posted on 9/17/16 8:56 PM.
Hi,
Can you add examples for vaadin Table or TreeTable integration ?
Posted on 10/11/16 3:41 PM.
What could I do to get ContextMenu to hide after selection
Posted on 12/25/16 3:49 PM.