Client side grid columns are not bound to server side properties

We have a client side configured grid and want to attach the data with a data provider on the server side to provide lazy loading while the client side can be designed by an UX designer. When solely using grid.setDataProvider the Grid shows empty rows (where the number of rows is calculated correct).

It seems that the properties of the beans are not automatically bound to the grid.

When adding columns from the server side by using a template renderer and withProperty, the properties are bound to the grid and also used from the server side.

Example polymer template code

<vaadin-grid id="project-list" theme="compact no-row-borders">
    <vaadin-grid-column flex-grow="4">
          <template class="header">
                <div class="header-item">Project Name</div>
          </template>
          <template class="data-item customer-list">
                 <div class="customer-list">
                        [[item.name]]
                 </div>
          </template>
    ...

Binding the data provider

projectGrid.setDataProvider(DataProvider.<ProjectDPO, Object>fromFilteringCallbacks(...));

This combination leads to the empty results. We have to add a new column on server side with the following code. After that, also the client side configured conten is shown correctly.

projectGridd.addColumn(TemplateRenderer.of(...).withProperty("name", ProjectDPO::getName));

This should not be needed, since the additional column is unnecessary. The property binding should work automatically out of the box.

[stefanuebe]

Yep, sounds good.

I helped myself with the following solution as a workaround. Creates a simple renderer, binds needed properties to the grid and hides the “utility” column.

TemplateRenderer<ProjectDPO> renderer = TemplateRenderer.<ProjectDPO>of("");

renderer.withProperty("name", ProjectDPO::getName);
renderer.withProperty("budget", ProjectDelegate::getBudget);
// ...

Column<ProjectDPO> column = addColumn(renderer);
column.setId("___property_provider___");
column.setVisible(false);

[Legioth]

Seems like this is a duplicate of vaadin/vaadin-grid-flow#62.