How to hook data-grid events in parent lit-element component? - vaadin

Question

I want to react on events started by elements placed in the data-grid rows.
Vaading data-grid prevents events from bubbling up to the parent component containing the grid. Having buttons placed in the grid column rendered for each row I cannot catch the click or any other event from the component that hosts the grid.
The examples from https://vaadin.com/components/vaadin-grid/html-examples are relying on js hooks being attached in the html file. I am working with Lit-element and trying to do the same at firstUpdated() callback. The problem is that apparently at this point the table is not available.
<vaadin-grid id="test" .items=${this.data} theme="compact">
<vaadin-grid-column width="40px" flex-grow="0">
<template class="header">#</template>
<template>
<vaadin-button style="font-size:10px;" theme="icon" focus-target #click="${(e) => { console.log(e) }}">
<iron-icon icon="icons:create"></iron-icon>
</vaadin-button>
</template>
</vaadin-grid-column>
</vaadin-grid>
I expected to have the log and nothing happens as the grid component prevents event from bubbling up to my component.
The code that tries to implement renderer property for vaadin-grid-column:
import { LitElement, html, css } from 'lit-element'
import {render} from 'lit-html';
import '#vaadin/vaadin-grid/vaadin-grid.js'
import '#vaadin/vaadin-grid/vaadin-grid-filter-column.js'
import '#vaadin/vaadin-grid/vaadin-grid-sort-column.js';
import '#vaadin/vaadin-grid/vaadin-grid-filter.js';
import '#vaadin/vaadin-grid/vaadin-grid-sorter.js'
export default class MyClass extends LitElement {
static get properties () {
return {
data: {
type: Array,
hasChanged: () => true
},
}
}
get grid() {
return this.shadowRoot.querySelector('vaadin-grid');
}
constructor () {
super()
this.data = []//is being assigned from super as a property to a custom element
}
render () {
return html`
<vaadin-grid id="test" .items=${this.data}>
<vaadin-grid-column .renderer=${this.columnRenderer} header="some header text"></vaadin-grid-column>
</vaadin-grid>
`
}
columnRenderer(root, column, rowData) {
render(html`test string`, root);
}
}
window.customElements.define('my-elem', MyClass)

Answer 1

When using vaadin-grid inside LitElement-based components you should use renderers
Here's how your code would look using renderers
import {LitElement, html} from 'lit-element';
// you need lit-html's render function
import {render} from 'lit-html';
class MyElement extends LitElement {
// we'll just assume the data array is defined to keep the sample short
render() {
return html`
<vaadin-grid id="test" .items=${this.data} theme="compact">
<vaadin-grid-column width="40px" flex-grow="0" .renderer=${this.columnRenderer} .headerRenderer=${this.columnHeaderRenderer}></vaadin-grid-column>
<vaadin-grid>
`;
}
columnHeaderRenderer(root) {
render(html`#`, root);
// you could also just do this
// root.textContent = '#'
// or actually just use the column's header property would be easier tbh
}
columnRenderer(root, column, rowData) {
render(
html`
<vaadin-button style="font-size: 10px;" theme="icon" focus-target #click="${(e) => { console.log(e) }}">
<iron-icon icon="icons:create"></iron-icon>
</vaadin-button>
`, root);
}
}
You can see this and more of vaadin-grid's features in action in LitElement in this Glitch created by one of the vaadin team members