Skip to content

Vaadin 8.x Grid: Declarative UI and proper Data Binding

While Vaadin makes it easy to develop UIs in one language and allows extremely simple programming stlye like clunching everything into one class, the narrow way of setting up “the best way” for a clear separation of Model, View and Control is tricky to find.

At least for me, I define this path as follows:

  • Model: usage of POJOs and Vaadin Data Model ( see here)
  • View: Declarative Design  (see here)
  • Control: CustomComponent

To be able to follow this path, I would like to extract as much of the “Design” into the Declarative Design as possible. Unfortunately, at point of writing, the Vaadin documentation lacks on deepth about how to use each of their Component declaratively.

This Note is about using a Grid inside a Declarative Design and attaching a List of Pojos via a ListDataProvider.

The Control:

package com.example.codesamples.view;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.example.codesamples.model.Person;
import com.vaadin.annotations.DesignRoot;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Grid;
import com.vaadin.ui.declarative.Design;

public class Sample extends CustomComponent {

  private Grid<Person> grid;
  private Button add;

  public Sample() {;
    List<Person> data = new ArrayList<Person>();
    ListDataProvider<Person> dataProvider = DataProvider.ofCollection(data);

    add.addClickListener(e -> {
      int someId = (data.size() + 1);

      Person person = new Person();
      person.setBirthDate(new Date(3000 + (someId * 100000000)));
      person.setFirstName("First Name " + someId);
      person.setLastName("Last Name " + someId);




The View:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<vaadin-vertical-layout size-full>
  <vaadin-grid size-full :expand _id="grid" data-item-type="com.example.codesamples.model.Person">
        <col column-id="firstName"/>
        <col column-id="lastName"/>
        <col column-id="birthDate"/>
          <th column-ids="firstName">First Name</th>
          <th column-ids="lastName">Last Name</th>
          <th column-ids="birthDate">Birth Date</th>
  <vaadin-horizontal-layout width-full>
    <vaadin-horizontal-layout :right width-auto>
      <vaadin-button width-auto _id="add">Add Person</vaadin-button>


The important bit in this whole sample is the “data-item-type” attribute in the View. This allows to intatiate the Grid with the proper PropertySet to automatically enable the Binding of Person Items into the grid.


Leave a Reply

Your email address will not be published. Required fields are marked *