剑道网格展开/折叠主行点击详细信息

Question

我想用主细节行实现一个特定的Kendo网格行为。所需的行为是，如果单击一行，详细信息将展开，如果单击另一行，它将展开，而另一行已关闭，因此一次只打开一个详细信息。

默认情况下，可以通过单击行开头的+/-符号打开详细信息。我看到有一些类似的问题，但大多数都使用.rowCollapse((方法，这在Kendo文档中是不赞成的。我想通过建议的ExpandDetailsDirective来实现它，但我不知道什么是正确的方法。

还有没有一种方法可以完全隐藏+/-符号？

// My HTML atm
<kendo-grid [data]="data"
[sortable]="true"
[selectable]="true"
(selectionChange)="rowSelection($event)"
[rowSelected]="isRowSelected"
kendoGridExpandDetailsBy
[expandDetailBy]="expandDetailsBy"
[(expandedDetailKeys)]="expandedDetailKeys">
<kendo-grid-column field="id"></kendo-grid-column>
<div *kendoGridDetailTemplate="let dataItem">
<grid-row-details [input]="dataItem"></grid-row-details>
</div>
</kendo-grid>
// TS
export class Myomponent implements OnInit {
data: any[] = [{ id: 1 }, { id: 2 }, { id: 3 }];
selectedId: number;
public expandedDetailKeys: any[] = [];
public expandDetailsBy = (dataItem: any): any => {
return dataItem.id;
};
isRowSelected = (row: RowArgs) => row.dataItem.id === this.selectedId;
rowSelection(payload: SelectionEvent) {
this.selectedId = payload.selectedRows[0].dataItem.id;
this.expandDetailsBy({ id: this.selectedId });
}
constructor() {}
ngOnInit(): void {}
}

Answer 1

尝试网格指令

(detailExpand)="onExpandHandler($event)"

然后在代码中

onExpandHandler(e) {
this.collapseAll(e)}

public collapseAll(row: number = -1) {
this.view.subscribe(itm => {
let i = 0;
for (i = 0; i < itm.data.length; i++) { if (i != row) this.grid.collapseRow(i); }
})}