<vaadin-grid>
ships with a helper element <vaadin-grid-selection-column>
that renders checkboxes bound to the selection state of the grid on every row.
It also adds a "select all" checkbox to the column header when items
array is used
as the grid's data source.
The selected items can be accessed through the grid's selectedItems
property. Each time
the selection state changes, grid dispatches a "selected-items-changed" event.
Hint: Use autoSelect
to enable selecting rows on click.
NOTE: You must explicitly import the vaadin-grid-selection-column
in order to use it.
When a row is clicked or the space key is pressed while a row cell is in focus,
the related item object is assigned as the grid's activeItem
.
To programmatically select items, the activeItem
, for example, could be
added to the grid's selectedItems
array.
The methods selectItem(item)
and deselectItem(item)
can also be used
to select or deselect items.
In the example below, the grid's selectedItems
array is replaced
whenever activeItem
changes, making it single-selectable.
When dealing with remote data, "selecting all" can get tricky when it comes to
reflecting the full data set to the grid's selectedItems
array.
In this example, a custom selection state is used to implement "select all"
functionality without having to include all the items to selectedItems
.
The selected
property of the rowData
renderer parameter is used
here to reflect the item's selection state to a checkbox on the corresponding row.
When a focused cell has child elements, the Space key clicks the first child element.
Clicking a child element inside a cell activates the item, unless either:
<input>
, a <button>
, or has
the tabindex
attribute.
click
event.click
event.Try clicking and pressing Space for the body cell contents in the example below.
In addition to modifying selection using selectedItems
property
or selectItem(item)
and deselectItem(item)
methods,
with Polymer templates, the instance property {{selected}}
can also be
toggled to apply selection.