Grid Row Selection with Interactive Elements

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

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

Solution

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:

   html

   <kendo-grid-column title="Icon">
       <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
           <kendo-svgicon [icon]="checkCircle" (click)="selectRowByClick(rowIndex)"></kendo-svgicon>
       </ng-template>
   </kendo-grid-column>

2. In the event handler, update the selectedKeys collection of the Grid with the rowIndex associated with the corresponding cell:

   ts

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

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Grid Selection Basics
• Kendo UI for Angular Grid Documentation
• API Reference of the Grid Component