Angular 4 Kendo grid expand detail template by clicking on the row instead of the arrow

Question

I found this link but it has been a while so I wanted to see if this has been implemented. I had a hard time finding a solution to what I am trying to accomplish.

Opening the kendoDetailTemplate programmatically

Answer 1

You can utilize the cellClick event, and the expandRow function to open the detail-row, when the user clicks a cell.

Detailed information on those options (and more) can be found on their API Reference .

*.html

<kendo-grid
    (cellClick)="onCellClick($event)"
>
    ...
</kendo-grid>

*.ts

onCellClick(event: CellClickEvent) {
    event.sender.expandRow(event.rowIndex);
}

I've also prepared a Plunker to show the code above in action.

Answer 2

declare you viewChild

 @ViewChild('grid') private grid;

then call the below method from onclick. Pass row index as param.

 expandRow(i: number) {
  this.isRowExpanded = !this.isRowExpanded;
  this.isRowExpanded ? this.grid.collapseRow(i) : this.grid.expandRow(i);
}

You can get the row index by

ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"