Vaadin Elements - Context Menu - Using with Vaadin Grid

Using with Vaadin Grid

vaadin-grid has the “detailed events” API, which exposes some properties of the grid internals corresponding to event targets. You can enable detailed events by specifying the desired set of user events in the detailedEvents array property of the grid. The detailed events API is supported in vaadin-grid v1.2.0+.

In the following example, the grid has the vaadin-contextmenu detailed event enabled, which makes the grid dispatch the detailed-vaadin-contextmenu custom event, that serves as an opening event for the vaadin-context-menu.

<dom-module id="my-grid-view">
  <template>
    <vaadin-context-menu open-on="detailed-vaadin-contextmenu">
      <template>
        <paper-menu>
          <paper-item on-tap="_add">Add</paper-item>
          <template is="dom-if" if="[[_isGridBody(detail)]]">
            <paper-item detail="[[detail]]" on-tap="_remove">Remove</paper-item>
          </template>
        </paper-menu>
      </template>

      <vaadin-grid id="grid" items="[[items]]">
        <table>
          <colgroup>
            <col name="name">
            <col name="surname">
            <col name="effort">
          </colgroup>
        </table>
      </vaadin-grid>
    </vaadin-context-menu>
  </template>

  <script>
    Polymer({
      is: 'my-grid-view',

      properties: {
        items: {
          type: Array,
          value: function() {
            return getItems();
          }
        }
      },

      ready: function() {
        this.$.grid.detailedEvents = ['vaadin-contextmenu'];
      },

      _isGridBody: function(detail) {
        return detail.section === 'body';
      },

      _add: function() {
        this.unshift('items', getNewItem());
      },

      _remove: function(e) {
        this.splice('items', e.target.detail.row, 1);
      }
    });
  </script>
</dom-module>

<my-grid-view></my-grid-view>
vaadin context menu on grid
Figure 1. vaadin-context-menu used on vaadin-grid
The detail property from the grid detailed event becomes available in the menu template bindings. In the above example, the detail is used to show the “Remove” menu item only in the grid body context menu, and also in to find out the grid row index the _remove menu item click handler (e.target.detail.row).

See also the vaadin-grid API Reference: