[英]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 以编程方式打开kendoDetailTemplate
You can utilize the cellClick
event, and the expandRow
function to open the detail-row, when the user clicks a cell. 当用户单击单元格时,可以利用cellClick
事件和expandRow
函数打开明细行。
Detailed information on those options (and more) can be found on their API Reference . 有关这些选项(以及更多)的详细信息,可以在其API参考中找到。
<kendo-grid
(cellClick)="onCellClick($event)"
>
...
</kendo-grid>
onCellClick(event: CellClickEvent) {
event.sender.expandRow(event.rowIndex);
}
I've also prepared a Plunker to show the code above in action. 我还准备了一个Plunker来演示上面的代码。
declare you viewChild 声明您为viewChild
@ViewChild('grid') private grid;
then call the below method from onclick. 然后从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"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.