You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Selection · Vaadin
Vaadin Elements - Grid - Selection

Selection

Grid allows index based selection of data rows either through UI interaction or using the JavaScript API. The selection behavior depends on the currently active selection mode.

vaadin grid selection
Figure 1. A vaadin-grid with four rows selected

Selection Mode

The vaadin-grid has four separate selection modes. Defining the selection mode can be done using the selection-mode attribute or the grid.selection.mode property of the JavaScript API.

  • Single (single) is the default selection mode. It allows only one row to be selected at once.

  • Multi (multi) selection mode reveals an additional checkbox column allowing the user to select multiple rows.

  • All (all) selection mode has each row selected by default allowing the user to deselect individual rows using an additional checkbox column.

  • Disabled (disabled) disables the selection functionality.

The selection mode can also be changed by some operations in the selection API. Also, if the user selects all items while in the multi selection mode, the mode will automatically change to all.

To get notified of changes in the selection mode, you can listen to an event named selection-mode-changed.

Selection API

This section explains the basic operations available through the selection API.

grid.selection.select(index)

Selects the row with the given index. If the selection mode is single, the method deselects the previously selected row.

grid.selection.deselect(index)

Deselects the row with the given index.

grid.selection.selectAll()

Selects all rows and changes the selection mode to all.

grid.selection.clear()

Deselects all selected rows. If the selection mode is all, the method will change the selection mode to multi.

Accessing the Selected Rows

In order to access the selected row indexes, you can call grid.selection.selected() method. The return value is an array containing the currently selected indexes.

// Log the selections to console on select event.
// Example output: "Selected: 3,5,6"
grid.addEventListener('selected-items-changed', function() {
  console.log('Selected: ' + grid.selection.selected());
});

If your grid has a very large set of items and the selection mode is all, you may want to use the grid.selection.deselected() method instead. The method returns the indexes of rows that are not selected.

The total number of selected items is always available through grid.selection.size property.