如何以编程方式打开和关闭详细模板？

Question

我有 3 列，因此有 3 个单元格，其中有一个按钮。

单击按钮我想打开/关闭详细模板

左侧没有 + 图标

HTML：

<kendo-grid-column field="info" title="info">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button mat-button (click)="clickInfoCell()">
        </button>
    </ng-template>
</kendo-grid-column>

<ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex">
     // DETAIL TEMPLATE BODY
</ng-template>

TS：

public onCellClick(event: CellClickEvent){
    this.myEvent= event;
}

//toggleTemplate
public clickInfoCell(){
    //Close previous template
    //Open detail template
}

谢谢

Answer 1

实际上有一个内置机制，具有用于此目的的专用指令。

模板：

<kendo-grid
    [kendoGridBinding]="gridView"
    [kendoGridExpandDetailsBy]="expandDetailsBy"
    [(expandedDetailKeys)]="expandedDetailKeys"
></kendo-grid>

成分：

public expandedDetailKeys: any[] = [1];
public expandDetailsBy = (dataItem: any): any => {
    return dataItem.ProductID;
};

您可以在此处阅读有关机制的信息。

您可以在 StackBlitz 此处查看工作演示。