New to Kendo UI for Angular? Start a free 30-day trial

Persisting the Selection

In order to persist the selection during dataStateChange operations such as paging and sorting, apply the SelectionDirective to the Angular 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 dataItem field 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.

Change Theme

Theme

Loading ...

By a Dataitem Field

The following example demonstrates how to store the selected items by the ProductID field.

Change Theme

Theme

Loading ...

By a Custom Key

The following example demonstrates how to store the selected items by a custom key.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

To ensure that the selection includes items from multiple pages when virtual scrolling is enabled, use the following approach:

Set the Grid kendoGridSelectBy directive 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 SelectionDirective selectedKeys collection.

html
<kendo-grid ...[selectedKeys]="selectedKeys"></kendo-grid>
ts
public selectedKeys: number[] = []; // Optionally provide initially selected items.

Handle the Grid selectionChange and cellClick events.

html

<kendo-grid
    ...
    (selectionChange)="onSelectionChange($event)"
    (cellClick)="onCellClick($event)">
</kendo-grid>

Use the selectionChange event handler to update the selectedKeys collection depending on the key that the user holds. For this purpose, determine which items have been selected while the user holds the Shift or Ctrl/Cmd key.

4.1. Enable range selection with Shift + click.

Use the event data of the shiftKey property to check whether the Shift key is pressed. If it is, use some custom logic to produce a selectedKeys collection, representing the data items between the rangeStartKey and rangeEndKey properties (available in the event data object). If the rangeStartKey is not present, this means the selection must start from the first item.

public 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.

public 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 cellClick event handler to address the simple click when there is no Shift or Ctrl/Cmd modifier applied.

public 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.

Change Theme

Theme

Loading ...

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 state property 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.

Change Theme

Theme

Loading ...

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 dataItem field 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 dataItem field 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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

By Custom Keys

The following example demonstrates how to store the selection by custom data item and column keys.

Change Theme

Theme

Loading ...