Selection Basics

Updated on Jan 7, 2026

The Angular Grid enables the user to select single or multiple cells and rows. It provides a rich API for customizing the selection logic and persisting the selected items based on specific requirements.

Setup

To enable the selection, configure the selectable option. It accepts both boolean and SelectableSettings parameters.

If you use a SelectableSettings parameter, the Kendo UI Grid for Angular enables you to specify the following options:

• enabled—Determines if the selection is initially enabled. The default value is true.
• checkboxOnly—Determines if the row selection is possible only when the user clicks a checkbox which utilizes the SelectionCheckboxDirective. The default value is false.
• mode—Sets the SelectableMode of the selection. The default value is multiple.
• cell—Enables the cell selection. The default value is false.
• drag—Enables the drag selection. The default value is false.

The Grid selects only the items on the current page. To select all items across pages or persist selection with virtual scrolling, refer to select all rows or persist range selection with virtual scrolling.

The following articles cover common selection scenarios:

Row Selection

Enable users to select single or multiple rows with checkboxes, keyboard navigation, and programmatic control.

Cell Selection

Allow users to select individual cells or cell ranges with mouse and keyboard interactions.

Persisting the Selection

Maintain selected items across paging, virtual scrolling, and data operations using SelectionDirective.

Custom Selection

Implement custom selection logic and behaviors to match specific business requirements.

Selection Aggregates

Calculate and display aggregate values for selected rows such as sum, average, and count.

Toggling Selection Dynamically

To control the selection state dynamically, bind the selectable option to a component property:

html

<button (click)="toggleSelection()">Toggle Selection</button>
<kendo-grid [data]="gridData" [selectable]="isSelectable">
    ...
</kendo-grid>

ts

public isSelectable = true;

public toggleSelection(): void {
    this.isSelectable = !this.isSelectable;
}

When using the SelectionDirective, you can disable the initial selection while maintaining the ability to enable it later. Pass a SelectableSettings object with enabled set to false:

html

<kendo-grid ...
    [selectable]="selectableSettings"
    kendoGridSelectBy="ProductID"
    [(selectedKeys)]="mySelection">
    ...
</kendo-grid>

ts

public selectableSettings: SelectableSettings = {
    enabled: false
};

public enableSelection(): void {
    this.selectableSettings = { enabled: true };
}

Handling Selection Changes

When the user modifies the selection the Grid emits a selectionChange event returning a SelectionEvent object. This object contains information about the current selection state, including the selected and deselected items.

Use this event to update external UI elements, calculate totals or aggregates (for more information, see the Selection Aggregates section), enable or disable actions based on the number of selected items, or track user selection behavior.

Change Theme

Theme

Loading ...

Suggested Links

• SelectionDirective
• SelectableSettings
• RowArgs
• API Reference of the GridComponent
• API Index of the Grid