Custom Selection
The Angular 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
rowSelectedfunction takes precedence both over the default selection behavior and over any possibly configured selection option.
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
cellSelectedfunction takes precedence both over the default selection behavior and over any possibly configured selection option.
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.