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

Example
View Source
Edit In Stackblitz  
Change Theme:

By a Dataitem Field

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

Example
View Source
Edit In Stackblitz  
Change Theme:

By a Custom Key

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

Example
View Source
Edit In Stackblitz  
Change Theme:

With the Select-All Feature

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Selecting All Items

To select all Grid items via the select-all checkbox, attach a handler to the selectAllChange event, which is emitted when the user selects or deselects the checkbox, and can be used to manually store items from other pages. You can also take full control over this feature by manually setting the state of the select-all checkbox.

The following example demonstrates how to select all Grid items at once.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

You can override this behavior by specifying the keys that will be stored instead.

By Dataitem 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

By Custom Keys

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

Example
View Source
Edit In Stackblitz  
Change Theme: