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

Custom Selection

The Grid provides low-level hooks for implementing custom selection logic.

Setting the Selected Rows

You can set the selected rows 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
Change Theme:

Setting the Selected Cells

To set the selected cells programmatically, specify the cellSelected function. The function is executed for each data cell in the Grid and determines whether the cell will be selected, returning both the selected state, and the respective CellSelectionItem.

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

Example
View Source
Change Theme:

Disabling the Selection of Specific Elements

The Grid automatically handles clicks made on non-focusable elements and performs selection. To disable this default behavior for custom or specific non-focusable elements, apply the k-grid-ignore-click class.

<ng-template kendoGridCellTemplate let-dataItem>
    <div
      class="k-grid-ignore-click"
      style="width: 50%;border: 1px solid black;"
    >
      Ignored Element
    </div>
    {{ dataItem.ProductName }}
</ng-template>

The following example prevents the row selection when clicking on the custom container displayed inside the cell.

Example
View Source
Change Theme: