Two Way Databaing Not Working for Vaadin Flow Grid

Flow
1

I have rates that are being set via a TemplateModel:

public interface Model extends TemplateModel {
@Include({"id", "jobType", "amount" })
@Convert(value = LongToStringConverter.class, path = "id")
void setRates(List<ClientRate> rates);
List<ClientRate> getRates();
}

In the component:

<vaadin-grid theme="compact" id="rates-grid" items="[[rates]
]" size="200">
<vaadin-grid-column width="100%">
<template class="header">Job Type</template>
<template>
<input class="vaadin-input" value="{{item.jobType}}" >
</template>
</vaadin-grid-column>
</vaadin-grid>

When the rates are fetched later to update the source bean, the values are unchanged despite edits to the displayed values:

for(ClientRate r : getModel().getRates()) {
getLogger().info(" >> " + r.getJobType());
}

Things I tried:

  1. On <vaadin-grid> the following variations: items$="[[rates] ]", items$="{{rates}}", items="{{rates}}"
  2. On input control: value="{{item.jobType::input}}"
2

The problem is that the ClientRate in the model is not the actual ClientRate Object, but a proxy Object of the given Objects.

This means that updating the ClientRate objects that were initially set will not reflect to the Model data.
The model content should be updated instead by setting the contents again or updating the correct object using the model object setter.

See the [Using Beans with a PolymerTemplate Model]
(https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-model-bean.html) document:

There is a note saying:
If you later on update the Person person bean created in the constructor, nothing will happen to the mode

3

Hi Taurai,

Configuring the Grid component by using templates in currently not supported by Flow.

You can however declare a vaadin-grid in your template (without columns), map it to your PolymerTemplate class by using @Id, and then add columns to it and set the items (or DataProvider).

For example:

<vaadin-grid theme="compact" id="rates-grid"></vaadin-grid>

Java class:

@Id("rates-grid")
private Grid<ClientRate> grid;

// Called from the constructor, or any other point where you configure your view/page
private void configureGrid(){
    grid.addColumn(ClientRate::getJobType).setHeader("Job Type");
	grid.setItems(getRates());
}

— edit —
Now I realized you’re not using the Grid at the server-side at all, so my comment doesn’t apply directly to your case. But I’ll leave the code here so it can help people having similar problems.

4

What you have said is correct, but I think you have misunderstood my problem. The problem is that the returned proxy objects do not reflect the updates made from the grid. If you look at the code provided I’m iterating over the rates from the model, not from the bean.

5

Flow is not being notified about the individual item changes.

Since you own the template, a good way of sending the data from the client to the server is to add an observer for when the item is changed (see https://www.polymer-project.org/2.0/docs/devguide/observers ) and then call a method on the server by using @ClientDelegate, or post an event that the server can receive by using @EventHandler + @EventData. If the data on the server-side, you can properly update your model.

More details can be found here https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-event-handlers.html