代码之家 › 专栏 › 技术社区 › Adrien

在Angular应用程序中以编程方式折叠Kendo UI网格细节

kendo-grid kendo-ui angular

2

Adrien · 技术社区 · 8 年前

我有一个带有库kendo UI的angular 5应用程序。在这个应用程序中,我有一个剑道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>

但我没有找到以编程方式关闭详细信息的方法。

你有什么想法吗?

1 回复 | 直到 8 年前

1

3

Philipp 8 年前

您可以通过 collapseRow 功能( API Reference ).

下面您可以找到一个示例,说明如何处理您的特定用例。

@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)`
    }
}