You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Menu Context · Vaadin
Vaadin Elements - Context Menu - Menu Context

Menu Context

You can use data bindings to the following properties in the menu template:

  • target is the menu opening event target, which is the element that the user has called the context menu for

  • detail is the menu opening event detail

In the following example, the menu item text is composed with the contents of the element that opens the menu:

<vaadin-context-menu selector="li">
  <template>
    <paper-menu>
      <paper-item>The menu target: [[target.textContent]]</paper-item>
    </paper-menu>
  </template>

  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</vaadin-context-menu>
vaadin context menu on list
Figure 1. vaadin-context-menu displays contents of the menu opener element

Accessing the Context on Menu Item Click

Sometimes in the click handler of a menu item it is required to access the menu context. It might be useful to read properties of the element that opened the menu, or read the menu opening event data. For this purpose, you can bind the menu template variables to the menu items.

In the following example, the _remove menu item click handler uses the index property of the list item element that opened the menu:

<vaadin-content-menu selector="li">
  <template>
    <paper-menu>
      <paper-item on-click="_remove" list-item="[[target]]">Remove</paper-item>
    </paper-menu>
  </template>

  <ul>
    <template is="dom-repeat" items="[[items]]">
      <li index="[[index]]"></li>
    </template>
  </ul>
</vaadin-context-menu>
_remove: function(e) {
  this.splice('items', e.target.listItem.index, 1);
}