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); }
})}

Kendo Grid展开/折叠主行上的详细信息，请单击

1 个答案: