1

I'm almost done in porting a couple of projects based on vaadin elements vaadin-grid from API 1.x to the latest version but I've not found examples or documentation about how to assign a custom renderer to a column.

For example in main.js I can't figure out how to port in API 2+ the following:

  grid.columns[2].renderer = function (cell) {
    cell.element.innerHTML = '';
    var progressBar = document.createElement('progress');
    progressBar.setAttribute('value', ((statuses.indexOf(cell.data) + 1) / statuses.length).toString());
    cell.element.appendChild(progressBar);
  };

The specific problem in here is that in API 2+ columns are undefined

Is it possible to assing custom rendering behavoir to a vaadin-grid-column?

NB: this question is not about vaadin framework but about vaadin elements

Debug session looking for something may help such as TemplateRenderer or similar but I found nothing until now:
20171118-debug-renderer

Franco Rondini
  • 10,841
  • 8
  • 51
  • 77

1 Answers1

2

The JS API is significantly changed from v1 to v2, and there’s no longer a columns object. Instead, if you want to configure columns using JS, you need to modify the properties of the <vaadin-grid-column> elements directly (you need to have a DOM reference).

For renderers specifically, you use regular HTML in the column template, as mentioned in the migration guide (the Wiki was closed for some reason, I just reopened it).

For your specific code example, it would translate to:

<vaadin-grid>
  <vaadin-grid-column>
    <template>
     <progress value="[[item.value]]"></progress>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

Replace item.value with the correct property in your data object (or use a computed property if you need to transform the data somehow before passing it onto the <progress> element.

Bonus:

Have you considered using <vaadin-progress-bar> ;)

Valo theme demo: https://cdn.vaadin.com/vaadin-valo-theme/2.0.0-alpha4/demo/progress-bars.html

Jouni
  • 2,830
  • 15
  • 12