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:

  • enabledDetermines if the selection is initially enabled. The default value is true.
  • checkboxOnlyDetermines if the row selection is possible only when the user clicks a checkbox which utilizes the SelectionCheckboxDirective. The default value is false.
  • modeSets the SelectableMode of the selection. The default value is multiple.
  • cellEnables the cell selection. The default value is false.
  • dragEnables 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:

  • selectedRowsA collection of RowArgs elements which represent the row items that were added to the selection (available in row selection mode).
  • deselectedRowsA collection of RowArgs elements which represent the row items that were removed from the selection (available in row selection mode).
  • selectedCellsA collection of CellSelectionItem elements which represent the cells that were added to the selection (available in cell selection mode).
  • deselectedCellsA collection of CellSelectionItem elements which represent the cells that were removed from the selection (available in cell selection mode).
  • ctrlKeyA boolean value which represents the state of the ctrlKey during the selection.
  • selectedA deprecated property which represents the selected state of the affected row.
  • indexA 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: