Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Accessing vaadin-grid data inside event listener
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
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!
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.