Kendo Grid развернуть / свернуть детали при щелчке по основной строке - PullRequest
Новая
       64

Kendo Grid развернуть / свернуть детали при щелчке по основной строке

0 голосов
/ 07 мая 2020

Я хотел бы реализовать специфическое c поведение сетки Kendo с строками master-detail. Желаемое поведение заключается в том, что если вы щелкнете по строке, детали будут расширяться, а если вы щелкнете по другой строке, она расширится, а другая закроется, поэтому в данный момент будет открыта только одна деталь.

By по умолчанию подробные сведения можно открыть, щелкнув значок +/- в начале строки. Я видел, что есть вопрос, похожий на этот, но большинство из них используют метод .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 {}
}
...