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

Selection Basics

The 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. This means that if virtual scrolling is enabled and the selection mode of the Grid is set to multiple, and the user selects multiple Grid items, the selection will handle only the items that are currently rendered (the items from the current page) and will not extend to items that are located on pages which are not currently rendered (visible). The checkbox selection is applicable to the row selection mode only, and is not compatible with the cell selection mode.

The following articles cover common selection scenarios:

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.

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
          [data]="gridData"
          [selectable]="selectableSettings"
          kendoGridSelectBy="ProductID"
          [(selectedKeys)]="mySelection"
        >
            ...
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = products;
    public mySelection: number[] = [];

    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.

Disabling the Selection of Specific Elements

By default, the Grid handles clicks which are made on non-focusable elements and performs selection. To disable the default behavior for custom or specific non-focusable elements, set the "k-grid-ignore-click" class.

Example
View Source
Edit In Stackblitz  
Change Theme: