0

I have a problem with loading the data for a grid in the backend and create the columns in the polymer template. The number of columns is correct but no data will be shown. I would really use the vaadin-grid-column feature cause of the sorting and filter functionality. Is there something I missed? I tried it with vaadin 12 and 13. Also I use 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>

It looks like this then no conent

But If I work with the TemplateRenderer and in there with just some divs the data will be shown:

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

order-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>

data shown with templaterenderer

Cappittall
  • 3,300
  • 3
  • 15
  • 23
spinner0815
  • 65
  • 1
  • 2
  • 7
  • Is this kind of mixin even possible? – spinner0815 Mar 13 '19 at 15:35
  • I do not know `Kotlin` Sorry for this first. I just want to ask where is the data (orderList) comes into `orderlist-view.html` – Cappittall Mar 14 '19 at 13:02
  • @HakanC It comes via the gridDataProvider `orderGrid.dataProvider = orderGridDataProvider` and in there from a rest resource which is calling – spinner0815 Mar 14 '19 at 13:19
  • can you check your data how it is exist, like : – Cappittall Mar 14 '19 at 13:31
  • Thank you for your support so far. I don't know if I implemented the observer right but I get a function back and no data. `ƒ (params, callback) { if (params.pageSize != grid.pageSize) { throw 'Invalid pageSize'; } let page = params.page;...` It's the function in the griConnector.js line 339 – spinner0815 Mar 14 '19 at 14:37
  • ,I will edit at above your code to observe the data-provider value in the element. – Cappittall Mar 14 '19 at 14:42
  • It's still the function :( – spinner0815 Mar 14 '19 at 14:59
  • plz try to pass only array data to polymer element ; something like `orderGrid.items` (as vaadin-grid has `items` attribute. So change the data-provider to `items` in polymer element. – Cappittall Mar 15 '19 at 12:30

1 Answers1

3

It is not enough to set the data provider, you also need to let the server-side Grid component know which parts of the server-side data to actually send to the client. As you observed, any properties that you configure for a template renderer that you add as a column will be published. There is also a dedicated method in Grid that you can use to publish item data without creating any columns: addValueProvider.

In your example, you could add something like this (expressed as Java since my Kotlin is not very fluent):

orderGrid.addValueProvider("header", order -> order.getId());
Leif Åstrand
  • 7,820
  • 13
  • 19