Add Eventlistener dynamically on vaadin combobox in Polymer Datatable

Question

I try to listen on changes made in a vaadin combobox (value) inside an iron-data-table.

This is my complete Datatable:

<iron-data-table  id="grid4" items="[[riskCombined]]" selection-enabled on-selected-items-changed="_selected" >
  <data-table-column name="#" width="20px" flex="0">
   <template>
        <div class="index">[[item]]</div>
      </template>
      </data-table-column>
    <data-table-column name="Risk" width="140px" flex="0">
      <template>[[item.name]]</template>
    </data-table-column>
    <data-table-column name="State" width="100px" flex="0">
    <template><vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value-change="valueChanged" id=combobox[[index]]> </vaadin-combo-box></template>
</data-table-column>  
  </iron-data-table>

I want to listen on value changes:

  <data-table-column name="State" width="100px" flex="0">
  <template>
  <vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value-  change="valueChanged" id=combobox[[index]]> </vaadin-combo-box>
  </template>
  </data-table-column>

I'm adding an eventlistener:

 <script>   
 var combobox = document.querySelector('vaadin-combo-box');
    combobox.addEventListener('value-changed', function(event) {
      console.log(event.detail.value);
    });

    combobox.addEventListener('selected-item-changed', function(event) {
      console.log(event.detail.value);
    });
 </script>

also tried with:

document.getElementById(...)

The problem is that the Eventlistener is just added to the first combobox. But since there are multiple boxes dynamically created, this doesn't work. How can I dynamically add the Eventlistener to multiple comboboxes? Or is there an other solution?

Edit: tried this:

valueChanged: function(event) {
        console.log(event.detail.value);
      }

Edit 2:

changed

on-value-change="valueChanged"

to

on-value-changed="valueChanged"

Now edit1 is working! But its firing already when the page loads the first time an sets the values of the combobox...

Is this your `custom element`? Why do you have so many `template` tags? Are you using `Polymer constructor` in your script? — a1626, Jul 10 '16 at 09:38

score 0 · Answer 1 · answered Aug 17 '16 at 08:03

The correct way is to use the on-value-changed (notice the changeD) attribute inside the template. Using querySelector is unreliable since there might be new elements being added later on the the table is scrolled.

Because the elements are being recycled and reused, there's a new value being bound to the <vaadin-combo-box> elements when scrolling – hence firing value-changed events everytime a row is recycled.

Assuming you want the user to be able to change the item.state property, I suggest you instead bound that property two-way with value="{{item.state}}" and add a listener for the event item-changed.

See my example here: http://jsbin.com/heroqu/edit?html,console,output

The item-changed seems to be fired always twice, but it should still be OK to use.

a1626 · Answer 2 · 2016-07-10T08:44:26.657

-1

Vaadin-combo-box already fires value-changed event when value changes. You can listen to value-changes event instead of creating your own event. Here's the documentation for vaadin-combo-box.

listeners:{'value-changed':'valueChanged'},
valueChanged:function(e){
  //code goes here
}

edited Jul 10 '16 at 08:44

answered Jul 10 '16 at 08:18

a1626

2,953
1
19
34

i tried this, see edit in my question. its not working – simplesystems Jul 10 '16 at 08:22
i've added code snippet. Is this how your tried it? – a1626 Jul 10 '16 at 08:44

Add Eventlistener dynamically on vaadin combobox in Polymer Datatable

2 Answers2