How to fetch row-data when button attached to grid is clicked?

Hi all

I’m using the grid component (fantastic component btw…) but I need assistance. I’m population the grid with data, I’m also attaching a button with a rederer at a later stage but I can’t figure out how to get hold of the data in the grid from the row that holds the button. Please take a look at attached image.

Best, Anton

firstUpdated(changedProperties) {
    this.grid = this.shadowRoot.getElementById('vaadin-grid-units');
    this.grid.addEventListener('active-item-changed', this.onRowClickedEvent);
  
      const columns = this.shadowRoot.querySelectorAll('vaadin-grid-column');
  
      columns[0]
.renderer = function(root, column, rowData) {
        root.innerHTML = '';
        const detailBtn = window.document.createElement('vaadin-button');
        detailBtn.textContent = 'Details';
        detailBtn.addEventListener('click', function(event) {
          console.log(event.target);

          /* Here is where I want to get row data from the row that holds the button */&

        });
        const textNode = window.document.createTextNode('');
  
        root.appendChild(detailBtn);
        root.appendChild(textNode);
      };
  }

18271319.png

Hi Anton

I think you already have the row data in the rowData variable of the columns[0] .renderer function. It should be the same type as your grid items.

Hahahaha, now I feel so stupid or even better. Blind! Thanks for pointing out the obvious… Can’t stop laughing :slight_smile: