在Angular應用程序中以編程方式折疊Kendo UI Grid詳細信息

Question

我的圖書館kendo UI有一個angular 5應用程序。 在此應用程序中，我有一個Kendo UI網格，其中包含一些行的詳細信息。 網格也是可排序的。 當我單擊列名稱對數據進行排序時，我想折疊所有展開的詳細信息。

這是我的html代碼：

<kendo-grid
#grid
[kendoGridBinding]="getDataService().listOfSolution"
[resizable]="false"
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[filterable]="false"
[groupable]="false"
[reorderable]="false"
[selectable]="false"
[scrollable]="'none'"
(dataStateChange)="onSort($event)"
[rowClass]="rowCallback()"
(detailCollapse)="onCollapse($event)"
(detailExpand)="onExpand($event)"
style="border: none;">
...
</kendo-grid>

但是我找不到以編程方式關閉細節的方法。

你有想法嗎 ？

Answer 1

您可以通過collapseRow函數（ API參考 ）來折疊主行。

您可以在下面找到一個示例，說明如何解決您的特定用例。

@Component({ ... })
export class MyComponent {
    onExpand(event) {
        // keep track of all expanded rows (index)
    }

    onCollapse(event) {
        // keep track of all expanded rows (index)
    }

    onSortChange(event) { // either (sortChange) or (dataStateChange)
        // iterate all expanded rows & collapse them via `this.grid.collapseRow(index)`
    }
}