Accessing vaadin-grid data inside event listener

Flow
1

Hi:

How can I access the table data on a vaadin-grid inside a custom Polymer element’s event listener? Let’s say I have the following custom element:

<dom-module id="myelement">
  <template>
    <vaadin-grid id="table">
    </vaadin-grid>
  </template>

  <script>
    Polymer ({
        is: 'myelement',

        properties: {
          info: Array,
       },

        ready: function() {
          this.$.table.items = this.info;
          this.$.table.addEventListener
          ( 'selected-items-changed', function ( event ) {
[...]

I cannot access this.info from inside the addEventListener anonymous function, and ‘this’ is just the HTMLElement…how do I get the grid data from the element?

Mona

2

Hi,

The event target is the vaadin-grid element, so you can access the “items” property from it:

this.$.table.addEventListener( 'selected-items-changed', function ( event ) {
   event.target.items;
});

Hope this helps!

3

Hi, Mona.

The value of this should be the reference to the element with the event listener added, that is the vaadin-grid element in your case. This is why you can not get this.info in your listener.

To make the value of this be the reference to your element, you should bind your event listener method to your element. For example:

this.$.table.addEventListener( 'selected-items-changed', function( event ) {
  event.target.items;
}.bind(this) );

You can still access the grid element inside a bound listener using the event.target reference.

Note that Polymer provides syntax sugar to simplify using bound event listeners in custom elements, such as the listeners object map and listen/unlisten methods. See the
Polymer Events Guide
.