Данные для Vaadin-flow Grid не отображаются, если я задаю элементы в бэкэнде и создаю шаблон полимера

Question

У меня проблема с загрузкой данных для сетки в бэкэнд и созданием столбцов в шаблоне полимера. Количество столбцов правильное, но данные не будут отображаться. Я бы действительно использовал причину vaadin-grid-column для функции сортировки и фильтрации. Я что-то пропустил? Я пробовал это с vaadin 12 и 13. Также я использую Spring-boot 2.1.0.RELEASE

OrderListView.kt

@Tag("orderlist-view")
@HtmlImport("src/views/orders/orderlist-view.html")
@Route(CommanderConst.PAGE_ORDERS, layout = MainView::class)
class OrderListView(
        var orderGridDataProvider: OrderGridDataProvider
) : PolymerTemplate<TemplateModel>(), BeforeEnterObserver {

    @Id("orderGrid")
    private lateinit var orderGrid: Grid<OrderDTO>

    override fun beforeEnter(event: BeforeEnterEvent?) {
        orderGrid.dataProvider = orderGridDataProvider
    }
}

orderlist-view.html:

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid-column.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid-filter.html">
<link rel="import" href="order-card.html">
<dom-module id="orderlist-view">
    <template>
        <vaadin-grid id="orderGrid" theme="no-row-borders" data-provider='{{myOrders}}'>
            <vaadin-grid-column>
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>
            <vaadin-grid-column>
                <template class="header">id</template>
                <template>[[item.id]]</template>
            </vaadin-grid-column>
        </vaadin-grid>
    </template>
    <script>
        class OrderListView extends Polymer.Element {
            static get is() {
                return 'orderlist-view';
            }
            static get properties() {return {
               myOrders:{
                 type:Array
                 observer: '_myOrders'
               }
            }}

            _myOrders(o) {console.log(o);}

        }
        window.customElements.define(OrderListView.is, OrderListView);
    </script>
</dom-module>

Тогда это выглядит так

Но если я буду работать с TemplateRenderer и там только с несколькими элементами div, будут показаны данные:

 orderGrid.addColumn(TemplateRenderer.of<OrderDTO>(
                "<order-show"
                        + "  header='[[item.header]]'"
                        + "  order='[[item.order]]'>"
                        + "</order-show>")!!
                .withProperty("order") { order -> order }
                .withProperty("header") { order -> order.id }
        )

порядка show.html:

<dom-module id="order-show">
    <template>
        <div>
            <span>[[header]]</span>
        </div>
        <div>
            <h3>[[order.id]]</h3>
            <template is="dom-repeat" items="[[order.orderItems]]">
                <div>
                    <span>[[item.quantity]]</span>
                </div>
            </template>
        </div>
    </template>

    <script>
        class OrderCard extends Polymer.Element {
            static get is() {
                return 'order-show';
            }
        }

        window.customElements.define(OrderCard.is, OrderCard);
    </script>
</dom-module>

Answer 1

Недостаточно установить провайдера данных, вам также нужно сообщить компоненту Grid на стороне сервера, какие части данных на стороне сервера фактически отправлять клиенту. Как вы заметили, все свойства, которые вы настраиваете для средства визуализации шаблонов, которое вы добавляете как столбец, будут опубликованы. В Grid также есть специальный метод, который вы можете использовать для публикации данных элементов без создания каких-либо столбцов: addValueProvider.

В вашем примере вы можете добавить что-то вроде этого (выражается как Java, так как мой Kotlin не очень свободно):

orderGrid.addValueProvider("header", order -> order.getId());