CODEWITHSUNDEEP
angularkendo-ui-angular2
Huy
Huy

Reputation: 1

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

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

Upvotes: 0

Views: 3584

Answers (2)

Jeekiran
Jeekiran

Reputation: 473

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"

Upvotes: 0

Philipp
Philipp

Reputation: 1884

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.

Upvotes: 2

Related Questions