Grid

Single-Selection Mode
Multi-Select Mode
Selection Modes in Flow
Conditional Selection

Grid supports single and multi-select modes. Neither is enabled by default.

Single-Selection Mode

In single-selection mode, the user can select and deselect rows by clicking anywhere on the row.

Open in a
new tab
Grid<Person> grid = new Grid<>(Person.class, false);
grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.addColumn(Person::getEmail).setHeader("Email");

List<Person> people = DataService.getPeople();
grid.setItems(people);

grid.addSelectionListener(selection -> {
    Optional<Person> optionalPerson = selection.getFirstSelectedItem();
    if (optionalPerson.isPresent()) {
        // System.out.printf("Selected person: %s%n",
        // optionalPerson.get().getFullName());
    }
});

Multi-Select Mode

In multi-select mode, the user can use a checkbox column to select and deselect more than one row — not necessarily contiguous rows. Or the user can select all rows by clicking on the checkbox in the header row — and then un-check the ones they don’t want to be selected, rather than check many, individually.

Open in a
new tab
Grid<Person> grid = new Grid<>(Person.class, false);
grid.setSelectionMode(Grid.SelectionMode.MULTI);
grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.addColumn(Person::getEmail).setHeader("Email");

List<Person> people = DataService.getPeople();
grid.setItems(people);

grid.addSelectionListener(selection -> {
    // System.out.printf("Number of selected people: %s%n",
    // selection.getAllSelectedItems().size());
});

In addition to selecting rows individually, a range of rows can be selected by dragging from one selection checkbox to another, if enabled:

Grid<Person> g = new Grid<>();
g.setSelectionMode(SelectionMode.MULTI);
GridMultiSelectionModel<Person> selectionModel = (GridMultiSelectionModel<Person>)g.getSelectionModel();
selectionModel.setDragSelect(true);

Selection Modes in Flow

Each selection mode is represented by a GridSelectionModel, accessible through the getSelectionModel() method, which can be cast that to the specific selection model type, SingleSelectionModel or MultiSelectionModel. These interfaces provide selection mode specific APIs for configuration and selection events.

To use Grid with Binder in Flow, you can use asSingleSelect() or asMultiSelect(), depending on the currently defined selection mode. Both methods return interfaces that implement the HasValue interface for use with Binder.

Conditional Selection

Grid allows you to configure a predicate to control which rows users may select or deselect. The predicate receives an item and must return true to allow selection — false to prevent it. This doesn’t, however, prohibit programmatic selection changes.

Grid<Order> grid = new Grid<>();
// Example predicate that only allows selecting orders that are not complete
grid.setItemSelectableProvider(order -> order.getStatus() != Order.State.COMPLETE);

Note

In multi-select mode, the Select All checkbox is hidden when using conditional selection. This is because determining the state of the checkbox would require checking all items whenever the selection changes. That could be a performance issue with large data sets or when using lazy data providers.

Docs