Selection Basics

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 selection feature of the Grid applies only to the currently rendered items (items from the current page). For more information on how to modify this behavior, refer to the multiple selection with virtual scrolling or paging section.

The following articles cover common selection scenarios:

• Row Selection
• Cell Selection
• Persisting the Selection
• Custom Selection
• Selection Aggregates

Toggling the Selection Functionality

To enable and disable the Grid selection functionality, bind the selectable option to a boolean value.

When the SelectionDirective is applied, it automatically enables the selection of the Grid component and you do not have to explicitly add the selectable option. However, you can still initially disable the selection and toggle it later by adding the selectable option as a SelectableSettings object. To disable the initial selection while keeping the toggle functionality, set the enabled property to false.

html

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

ts

public selectableSettings: SelectableSettings = {
    enabled: false
};

SelectionChange Event

When the user modifies the selection, the Grid emits the selectionChange event. It contains the following information:

• selectedRows—A collection of RowArgs elements which represent the row items that were added to the selection (available in row selection mode).
• deselectedRows—A collection of RowArgs elements which represent the row items that were removed from the selection (available in row selection mode).
• selectedCells—A collection of CellSelectionItem elements which represent the cells that were added to the selection (available in cell selection mode).
• deselectedCells—A collection of CellSelectionItem elements which represent the cells that were removed from the selection (available in cell selection mode).
• ctrlKey—A boolean value which represents the state of the ctrlKey during the selection.
• selected—A deprecated property which represents the selected state of the affected row.
• index—A deprecated property which represents the index of the affected row.

Suggested Links

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