How to handle vaadin-grid events in custom polymer 2 element?

Question

I need to include a vaadin-grid in a custom Polymer 2 element and need to handle the row selection event, but I can't seem to get it to work. I've managed to cobble together this from the various starter templates and demos on offer, and the basic click event handler works, but I have no idea how to handle the row selection. I'm actually using v3.0.0-beta1 of the vaadin-grid because I couldn't get v2 to work, but I don't think that's my problem.

Does anyone know how to handle events in vaadin components when you include them in your own custom elements?

Thanks.

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>

    <vaadin-grid aria-label="My Test Grid" items="[[users.result]]" id="grid">
      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">First Name</template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column width="150px">
        <template class="header">Address</template>
        <template>
          <p style="white-space: normal">[[item.address.street]], [[item.address.city]]</p>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }

      ready() {
        super.ready();

        this.$.grid.addEventListener('click', e => {
          this._handleClick(e)
        });

        // I added this listener code from here: https://vaadin.com/elements/-/element/vaadin-grid#demos
        // but it does nothing. I've also tried adding it to this, this.$, this.$.grid without success.
        // Should this event listener be added here, or if not, where exactly? The docs are very unclear.
        addEventListener('WebComponentsReady', function() {
          Polymer({
            is: 'my-element',

            properties: {
              activeItem: {
                observer: '_activeItemChanged'
              }
            },

            _activeItemChanged: function(item) {
              this.$.grid.selectedItems = item ? [item] : [];
              console.info('row clicked');
          }
        });

        // this works and outputs info like this: "vaadin-grid-cell-content-17 was clicked."
        _handleClick(e) {
          console.info(e.target.id + ' was clicked.');
        }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

I think that my code in the addEventListener is Polymer 1.x syntax but I'm not sure how to achieve the same result using Polymer 2.x.

Answer 1

I used only vaadin-grid v2, but I downloaded the v3.0.0-beta1 and took a look inside the package, at demo/row-details.html There is an example on how to handle the active row change event.

       <vaadin-grid on-active-item-changed="_onActiveItemChanged" id="grid" aria-label="Expanded Items Example" data-provider="[[dataProvider]]" size="200">

          <template class="row-details">
            <div class="details">
              <img src="[[item.picture.large]]"></img>
              <p>Hi! My name is [[item.name.first]]!</p>
            </div>
          </template>

        </vaadin-grid>

You can then define a function called _onActiveItemChanged inside your polymer element to handle the active item changed event.