<v-grid> cell.row.index behaves unexpectedly when used within a function inside custom renderer about vaadin-grid

[Saulis]

As a workaround, you need to store the cell.row.index to a variable outside the event listener function and use the stored value.

[erinhong17]

I'm also getting some odd side effects even though my cell.row.index has been stored outside the event listener function. Each time I click on my menu button, the icons duplicate.
Of the three rows I have right now, the first row gets 3 after the first click while second and third row gets 2 after the first click...

this.$.grid.columns[9].renderer=function(cell){
cell.element.innterHTML = ""; 

var button = document.createElement("paper-icon-button"); 
button.setAttribute("icon","menu"); 
button.addEventListener("click",function(){
console.log("detecting click!"); 
}); 

cell.element.appendChild(button); 
cell.row.index; 
}

Do you have any idea why that might be happening? This code is the only javascript in my file at the moment

[tomivirkki]

Hi @erinhong17,

There's a small typo in your example code that causes this:
innterHTML should be innerHTML

After fixing this, the code seems to work as expected

[jouni]

Wontfix, the workaround should be sufficient.