0

I am adding a row dynamically using a template. While adding the row, I also want a on-change="addTotal" function on Amount column. Whenever the Amount column of newly added row changes, it should call addTotal() function that adds all the values of rows and does total. However, using this code, it does not call the addTotal function.

addRow() {
    var template = document.createElement('template');
    template.innerHTML = '<div class="tr" ><div class="td" >' +
        '<vaadin-text-field theme="field-description"></vaadin-text-field></div><div class="td"><div class="td" >' +        
        '<vaadin-text-field theme="field-amount" class="totalcheck" on-change="addTotal"></vaadin-text-field></div><div class="td" ></div>'
 
    var fragment = template.content;
    this.$.Table.insertBefore(fragment, this.$.subTotalRow);

}

addTotal(){
//this adds all values of Amount column
}

I have tried addEventListener using a class name "totalcheck" in addRow() function, but this is undefined too.

document.querySelector('totalcheck').addEventListener('change', function (e) {
            console.log(e.detail); // true
        })
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
LaMars
  • 45
  • 2
  • 10
  • Could you clarify the versions? The tagged selection is slightly confusing. Vaadin 6 for one has been out of support for years, and I'm not sure if we ever did anything Polymer-related with it... Do you mean the Vaadin 7 compatibility package within Vaadin 8? – Anna Koskinen Jun 08 '21 at 16:19
  • I am using vaadin 20.0. Is there a way to add a function on-change="addTotal" in template.innerHTML for vaadin-text-field? – LaMars Jul 11 '21 at 19:15

0 Answers0