Selection

The Grid enables the user to select a single row or multiple rows.

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 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.

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).

Example
View Source
Edit In Stackblitz  
Change Theme:

Selection Modes and Features

The Grid provides the user with interaction options to select:

Single Selection Mode

To select a row when the Grid is in single selection mode, use either of the following approaches:

  • Click the row, or
  • Select the checkbox of the row.

To deselect a row when the Grid is in single selection mode, either:

  • Deselect the checkbox of the selected row, or
  • Press and hold Ctrl, and click the selected row.

If you click the selected row, it will not be deselected.

Multiple Selection Mode

To select multiple rows one by one when the Grid is in multiple selection mode, use either of the following approaches:

  • Select the checkbox of each desired row, or
  • Press and hold Ctrl, and click the desired rows.

To select a range of rows when the Grid is in the multiple selection mode, either:

  • Select a row through its checkbox or by clicking it, or
  • Press and hold Shift and click the row you want to be the last in the range. As a result, all rows between the initially selected row and the last one are selected.

To deselect one row at a time, either:

  • Deselect the checkbox of the specific row, or
  • Press and hold Ctrl and click the specific row.

To leave only the current row selected and deselect all previously selected rows, click a row within the Grid.

Checkbox-Only Selection

You can combine the checkbox-only selection with the single or the multiple modes. To select or deselect a single or multiple rows when the checkbox-only selection is enabled, select the checkboxes of the desired rows. For more information on checkbox selection, refer to the SelectionCheckboxDirective of the Grid.

Select-All Feature

The Grid allows the selection or deselection of all items on a page through a select-all checkbox in its header. To enable the select-all feature, set the showSelectAll option of CheckboxColumnComponent to true. You can also manually add a select-all checkbox to a template by utilizing the SelectAllCheckboxDirective.

The select-all feature applies only to the items that are rendered on the current page. For more information on how to modify this behavior, refer to the section on persisting the selection.

The following example demonstrates how to apply the default behavior of the select-all checkbox.

Example
View Source
Edit In Stackblitz  
Change Theme:

Persisting the Selection

The Grid enables you to override the default behavior of the selection feature and store the selected items:

During Data Operations

By default, the selection does not persist during dataStateChange operations such as paging and sorting. You can modify this behavior by applying the SelectionDirective to the Grid.

The directive stores the items by an absolute rowIndex. You can override this default behavior by specifying the key that will be stored instead. This key can be either:

  • A dataItem field which is set as a string, or
  • A function which accepts a RowArgs parameter and returns the key as a result.

To define the collection that will store the selected items, additionally specify the selectedKeys option together with the SelectionDirective. This approach provides you with full control over the selection functionalityfor example, it allows you to specify initially selected items, manually update the collection, and so on.

The following example demonstrates how to store the selected items by the ProductID field.

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates how to store the selected items by a custom key.

Example
View Source
Edit In Stackblitz  
Change Theme:

SelectionDirective automatically enables the selection of the Grid component and you do not have to explicitly add the selectable option. However, you can 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
    };
}

In Combination with the Select-All Feature

By default, when the select-all feature is enabled, the Grid stores only the items which are located on the current page. To modify this behavior, attach a handler to the selectAllChange event which is emitted when the user selects or deselects the select-all checkbox and can be used to manually store items from other pages. You can also take full control over this feature by manually setting the state of the select-all checkbox.

The following example demonstrates how to select and store the items per page.

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates how to select all Grid items at once.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting the Selected Rows

You can use an alternative approach to set the selected items by specifying the rowSelected function. The function is executed for each data row in the Grid and determines whether the row will be selected.

The rowSelected function takes precedence both over the default selection behavior and over any possibly configured selection option.

Example
View Source
Edit In Stackblitz  
Change Theme:

Modifying the Selection

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 items that were added to the selection.
  • deselectedRowsA collection of RowArgs elements which represent the items that were removed from the selection.
  • 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: