Vaadin элементы vaadin-grid пользовательского рендерера в API 2+

Question

Я почти закончил портировать пару проектов, основанных на элементах https://github.com/vaadin/vaadin-grid из API 1.x, до последней версии, но я не нашел примеров или документации о том, как назначить пользовательский рендерер для столбца.

Например, в main.js я не могу понять, как портировать в API 2+ следующее:

  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);
  };

Конкретная проблема здесь заключается в том, что в API 2+ columns являются undefined

Можно ли настроить пользовательский рендеринг поведения на vaadin-grid-column?

NB: этот вопрос не о vaadin framework а про ваадин

Отладка сеанса в поисках чего-то может помочь, например, TemplateRenderer или подобное, но я ничего не нашел до сих пор:

Answer 1

API JS значительно изменен с v1 на v2, и больше нет columns объект. Вместо этого, если вы хотите настроить столбцы с помощью JS, вам нужно изменить свойства <vaadin-grid-column> элементы (необходимо иметь ссылку на DOM).

В частности, для средств визуализации вы используете обычный HTML-код в шаблоне столбца, как упоминалось в руководстве по миграции (по какой-то причине Wiki была закрыта, я только что открыл ее снова).

Для вашего конкретного примера кода это будет означать:

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

замещать item.value с правильным свойством в вашем объекте данных (или используйте вычисляемое свойство, если вам нужно как-то преобразовать данные перед передачей их в <progress> элемент.

Бонус:

Рассматривали ли вы использование <vaadin-progress-bar>;)

Демонстрация темы Вало: https://cdn.vaadin.com/vaadin-valo-theme/2.0.0-alpha4/demo/progress-bars.html