Persisting the Selection
In order to persist the selection during dataStateChange operations such as paging and sorting, apply the SelectionDirective to the Grid.
To define the collection that will store the selected items, additionally specify the selectedKeys option together with the SelectionDirective. This approach provides you with full control over the selection functionality—for example, it allows you to specify initially selected items, manually update the collection, and so on.
Persisting the Row Selection
The SelectionDirective stores the items by an absolute rowIndex. You can override this behavior by specifying the key that will be stored instead. This key can be either:
- A
dataItemfield which is set as a string, or - A function which accepts a RowArgs parameter and returns the key as a result.
The following example demonstrates the default behavior of the directive when the row selection is enabled.
By a Dataitem Field
The following example demonstrates how to store the selected items by the ProductID field.
By a Custom Key
The following example demonstrates how to store the selected items by a custom key.
With Virtual Scrolling
When either virtual scrolling or paging is enabled, the Grid selection operates only with the items from the current page. To enable the developer to handle selected items across multiple pages, the selectionChange exposes the rangeStartRow and rangeEndRow properties. They represent the start and end items in a range selection performed when the end user clicks on a Grid row while holding the Shift key.
The following example demonstrates how to persist the selection when virtual scrolling is enabled.
To ensure that the selection includes items from multiple pages when virtual scrolling is enabled, use the following approach:
-
Set the Grid
kendoGridSelectBydirective and optionally provide the unique item identifier that will be used as selection key.html<kendo-grid [selectable]="true" kendoGridSelectBy="ProductID" ...></kendo-grid> -
Set the
SelectionDirectiveselectedKeyscollection.html<kendo-grid ...[selectedKeys]="selectedKeys"></kendo-grid>tspublic selectedKeys: number[] = []; // Optionally provide initially selected items. -
Handle the Grid
selectionChangeandcellClickevents.html<kendo-grid ... (selectionChange)="onSelectionChange($event)" (cellClick)="onCellClick($event)"> </kendo-grid> -
Use the
selectionChangeevent handler to update theselectedKeyscollection depending on the key that the user holds. For this purpose, determine which items have been selected while the user holds theShiftorCtrl/Cmdkey.4.1. Enable range selection with
Shift+ click.Use the event data of the
shiftKeyproperty to check whether theShiftkey is pressed. If it is, use some custom logic to produce aselectedKeyscollection, representing the data items between therangeStartKeyandrangeEndKeyproperties (available in the event data object). If therangeStartKeyis not present, this means the selection must start from the first item.tspublic onSelectionChange(e: SelectionEvent): void { if (e.shiftKey) { const startKey = e.rangeStartRow?.dataItem.ProductID ?? 1; const normalizedStart = Math.min(startKey, e.rangeEndRow.dataItem.ProductID); const normalizedEnd = Math.max(startKey, e.rangeEndKey.dataItem.ProductID); // We need to collect the `selectedKeys` for all items that fall between the selection range start and range end. // The correct way to do this will vary based on the specific scenario and availability of the data. // This is a simplified demo that does not account for sorting, filtering, etc. this.selectedKeys = this.data.slice(normalizedStart - 1, normalizedEnd).map(item => item.ProductID); } }4.2. Enable the adding or removing of items with
Ctrl/Cmd+ click.tspublic onSelectionChange(e: SelectionEvent): void { ...else if (e.ctrlKey) { const selectedKey = e.selectedRows[0]?.dataItem.ProductID; const deselectedKey = e.deselectedRows[0]?.dataItem.ProductID; if (selectedKey) { this.selectedKeys.push(selectedKey); } else { this.selectedKeys = this.selectedKeys.filter(key => key !== deselectedKey); } } } -
Finally, use the
cellClickevent handler to address the simple click when there is noShiftorCtrl/Cmdmodifier applied.tspublic onCellClick(e: CellClickEvent) { const { ctrlKey, metaKey, shiftKey } = e.originalEvent; const hasModifier = ctrlKey || metaKey || shiftKey; if (!hasModifier) { this.selectedKeys = [e.dataItem.ProductID]; } }
With the Select-All Feature
To display a checkbox in the column header and select all rows, set the showSelectAll property of the CheckboxColumnComponent to true. By default, when the select-all feature is enabled, the Grid stores only the items which are located on the current page.
The following example demonstrates how to select and store the items per page.
Selecting All Items
To take full control over the state of the select-all checkbox:
- Create a custom checkbox component and apply the SelectAllCheckboxDirective to it.
html
<input type="checkbox" kendoCheckBox kendoGridSelectAllCheckbox /> - Set the
stateproperty provided by the directive as necessary.
To select all Grid items via the select-all checkbox, attach a handler to the selectAllChange event. The event is emitted when the user selects or deselects the select-all checkbox and can be used to manually store items from other pages.
The following example demonstrates how to select all Grid items at once.
Persisting the Cell Selection
When the cell selection is enabled the SelectionDirective stores the items by an absolute rowIndex and colIndex. The row identifier key can be either:
- A
dataItemfield which is set as a string, or - A function which accepts a RowArgs parameter and returns the key as a result.
The column identifier key - columnKey, can be either:
- A
dataItemfield which is set as string, and the respective Grid column's field is bound to it. - A function which accepts the column and columnIndex, and returns the column key that will be stored as a result.
The following example demonstrates the default behavior of the directive.
You can override this behavior by specifying the keys that will be stored instead.
By Data Item and Column Fields
The following example demonstrates how to store the selected items by the ProductID and the field name of the column the selected cell belongs to.
By Custom Keys
The following example demonstrates how to store the selection by custom data item and column keys.