我想用主从行实现特定的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 {}
}
答案 0 :(得分:0)
尝试网格指令
(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); }
})}