# Selection Basics

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#selectable) option. It accepts both `boolean` and [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/selectioncheckboxdirective). The default value is `false`.
* `mode`—Sets the [`SelectableMode`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting#selecting-all-rows) or [persist range selection with virtual scrolling](https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting#persisting-range-selection-with-virtual-scrolling).

The following articles cover common selection scenarios:

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/grid/selection/row-selection">
      <ComponentTitle>Row Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable users to select single or multiple rows with checkboxes, keyboard navigation, and programmatic control.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/grid/selection/cell-selection">
      <ComponentTitle>Cell Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Allow users to select individual cells or cell ranges with mouse and keyboard interactions.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/grid/selection/persisting">
      <ComponentTitle>Persisting the Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Maintain selected items across paging, virtual scrolling, and data operations using SelectionDirective.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/grid/selection/custom-selection">
      <ComponentTitle>Custom Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Implement custom selection logic and behaviors to match specific business requirements.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/grid/selection/aggregates">
      <ComponentTitle>Selection Aggregates</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Calculate and display aggregate values for selected rows such as sum, average, and count.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Toggling Selection Dynamically

To control the selection state dynamically, bind the [`selectable`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/persisting), you can disable the initial selection while maintaining the ability to enable it later. Pass a [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/selectablesettings) object with [`enabled`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/selectablesettings#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`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#selectionchange) event returning a [`SelectionEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/aggregates) section), enable or disable actions based on the number of selected items, or track user selection behavior.

The following example demonstrates how to handle the `selectionChange` event to respond to user selection changes.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/configuration/selection/handling-changes/source.txt)

## Suggested Links

* [`SelectionDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/selectiondirective#selectiondirective)
* [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/selectablesettings)
* [`RowArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/rowargs)
* [API Reference of the `GridComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api)