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

Grid Row Selection with Interactive Elements


ProductProgress® Kendo UI® for Angular Grid


How can I select a row in the Grid when a hyperlink, icon, or button is clicked?


To achieve the desired behavior, you can implement custom selection by combining the functionalities of the CellTemplateDirective and the SelectionDirective of the Grid component:

  1. Bind a click event handler to the desired interactive elements. To track the current row that contains the respective element, use the rowIndex context field provided by the CellTemplateDirective:

    <kendo-grid-column title="Icon">
        <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
            <kendo-svgicon [icon]="checkCircle" (click)="selectRowByClick(rowIndex)"></kendo-svgicon>
  2. In the event handler, update the selectedKeys collection of the Grid with the rowIndex associated with the corresponding cell:

    public mySelection: number[] = [];
    public selectRowByClick(rowIndex: number): void {
        this.mySelection = [...this.mySelection];

The following example demonstrates the suggested approach.

View Source
Change Theme:

See Also

In this article

Not finding the help you need?