Button inside a vaadin-grid-column template

Hi

I am trying to get a button inside a vaadin-grid-column template to call a function onclick.

This is the code i have, but the onClickHandler is never called.

I am using the javascript version of the grid component.

import '@vaadin/vaadin-grid';
import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { styles, vaadinGridStyles } from './styles.js';

registerStyles('vaadin-grid', vaadinGridStyles);
export class IngUicIpaTable extends LitElement {
  static get properties() {
    return {
      items: {
        type: Array,
        value: [],
      },
    };
  }

  static get styles() {
    return styles;
  }

  constructor() {
    super();
    this.items = [];
  }

  onClickHandler() {
    console.log('button clicked');
  }

  render() {
    return html`
      <vaadin-grid .items=${this.items}>
        <vaadin-grid-column>
          <template class="header">#</template>
          <template><button onclick="${this.onClickHandler}">Click me</button></template>
        </vaadin-grid-column>
      </vaadin-grid>
    `;
  }
}

What am i doing wrong? In a normal html templating system this works just fine

thnx

I’m not too hands-on with templates, but I think you don’t need the curly braces around the onclick value. Another thing (and here i am not sure at all) is that maybe this from this.onClickHandler means the button, where it can’t find a onClickHandler function. I think this should work:

<button onclick="onClickHandler">Click me</button>

The <template> should not be used with LitElement, bindings inside it will not work.

Please use renderer functions instead, as demonstrated in this example:

https://glitch.com/edit/#!/vaadin-grid-renderer?path=app.js%3A1%3A0

I refactored my code to use it with renderer to a really simple example.

But the onButtonClick is still not being called.

import { LitElement, html, nothing, render } from 'ing-web/core.js';

import '@vaadin/vaadin-grid';
import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js';
import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { styles, vaadinGridStyles } from './styles.js';

registerStyles('vaadin-grid', vaadinGridStyles);
export class IngUicIpaTable extends LitElement {
  static get properties() {
    return {
      items: {
        type: Object,
        value: {},
      },
    };
  }

  static get styles() {
    return styles;
  }

  constructor() {
    super();
    this.items = {
      list: [],
    };
  }

  render() {
    return html`
      <vaadin-grid
        .items=${this.items.list}
      >
      <vaadin-grid-column .renderer="${this.optionRenderer}"></vaadin-grid-column>
      </vaadin-grid>
    `;
  }

  optionRenderer(root, column, rowData) {
    render(html`
      <button onclick="${this.onButtonClick}">click</button>
    `, root)
  }

  onButtonClick() {
    console.log('test')
  }
}

I also tried renderer="${optionRenderer.bind(this)}" but that also did not work

I’m seeing this behaviour also in the vaadin-grid when using the renderer on grid 6.0.1

    _boundDatabasesButtonsRenderer(
        root: HTMLElement,
        _column: GridColumnElement,
        model: GridItemModel
    ) {
        const env = model.item as EnvironmentContentDbServerApiModel;

        render(
            html`
            <div>
                <button title="Remove database" class="inline" @click="${this._remove}" .databaseId="${env.DbId}" style="width:10px">
                    <iron-icon icon="icons:delete-forever"></iron-icon>
                </button>
                <div class="inline" style="width:30px">
                    <vaadin-button title="Manage permissions" icon="social:group-add" @click="${this._managePermissions}" .databaseId="${env.DbId}"></vaadin-button>
                </div>
                <div class="inline" style="width:30px">
                    <vaadin-button title="View database permissions" icon="social:group" @click="${this._viewPermissions}" .databaseId="${env.DbId}"></vaadin-button>
                </div>
            </div>`, root );
    }

Is there a github issue raised for it?

After further investigation the renderer function doesn’t seem to have access to the ‘this’ object of the typescript module, anything defined in the renderer function is fine but its basically completely isolated from the class its in, is this by design?