如何使用Angular 2在Kendo Grid中顯示和隱藏明細行

Question

我有一個看起來像這樣的角度2劍道網格組件

<kendo-grid [data]="gridView"
        [selectable]="true"
        [pageSize]="pageSize"
        [skip]="skip"
        [pageable]="true"
        [sortable]="{ mode: 'multiple' }"
        [sort]="sort"
        (pageChange)="pageChange($event)">
<kendo-grid-column Title="Select">
    <template kendoCellTemplate let-dataItem>
        <input type="checkbox" (change)="onContactsSelect(dataItem.accountId, $event)"/>            
    </template>        
</kendo-grid-column>

<kendo-grid-column field="accountId" title="{{result.accountColumn}}" ></kendo-grid-column>
<kendo-grid-column field="name" title="{{result.nameColumn}}"></kendo-grid-column>
<kendo-grid-column field="address" title="{{result.addesssColumn}}"></kendo-grid-column>
<kendo-grid-column field="state" title="{{result.statusColumn}}"></kendo-grid-column>
<kendo-grid-column field="customField1" title="{{result.customField1Column}}"></kendo-grid-column>
<kendo-grid-column field="customField2" title="{{result.customField2Column}}"></kendo-grid-column>
<kendo-grid-column field="timeStamp" title="{{result.timeStampColumn}}"></kendo-grid-column>   
<template kendoDetailTemplate let-dataItem>
        <section *ngIf="!dataItem.isValid">
            <article>{{dataItem.errorMessage}}</article>
        </section>
</template>

我確實想僅在出現錯誤消息或僅當數據項無效時才顯示明細行（以及明細k加號和k減號在打開和關閉明細行之間切換）。

現在，無論數據項是否有效，切換按鈕都會出現在所有行上。

任何指針都會有所幫助。

Answer 1

我知道這是一個稍舊的線程，但是我確實設法提出了解決方案：

首先擺脫

<section *ngIf="!dataItem.isValid>
    ...
</section>

你要：

<template kendoDetailTemplate let-dataItem>
          [kendoGridDetailTemplateShowIf]="condition"
        ...whatever you want to show based on the condition...
</template>

上面的kendoGridDetailTemplateShowIf旁邊的條件是具有相同名稱的打字稿文件上的函數，它將使用dataitem作為參數（請注意，您不使用HTML中的參數將其編寫為函數）。 TS文件中的函數應返回一個布爾值，其中true將顯示展開按鈕，false將不顯示，因此將顯示或不顯示詳細信息模板。

因此在打字稿文件中：

condition(dataItem: any) : boolean {
    return !dataItem.isValid;
}

希望這可以幫助。

附帶說明（與答案無關，但有個人投訴，可以隨時跳過），這只是一個例子，其中Telerik的文檔令人恐懼，即使您可以借助類似的網站解決該問題，他們的框架可能很痛苦。