Question

我有一个带有Kendo UI库的角度5应用程序。在这个应用程序中，我尝试将一些样式添加到Kendo UI网格中。因此，当用户展开此行以查看详细信息时，我想更改行的样式。

在我的网格中我有

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

所以当行展开或折叠但我不知道如何更改此行的样式时，我会收到一个事件。

你有什么想法吗？

Answer 1

一种选择是通过detailCollapse和detailExpand事件（index或某种id）跟踪展开的行。

跟踪当前展开的行后，如果当前行/ dataItem已展开，请使用rowClass输入添加新的css类。

示例：（Plunker）

@Component({ ... })
export class MyComponent {
    expandedRows = [];

    onExpand(event) {
        // add index/id to this.expandedRows
    }

    onCollapse(event) {
        // remove index/id from this.expandedRows
    }

    rowCallback(context: RowClassArgs) {
        // if index/id from context is in this.expandedRows
        // return a custom css-class
    }
}

在Kendo UI Grid上展开时更改行样式

1 个答案: