Angular Kendo Grid使移除的主行的详细信息可见

import { Component } from '@angular/core';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-grid',
  template: `
    <kendo-grid
      [data]="gridData"
      [detail]="detail"
      [pageSize]="pageSize"
      [skip]="skip"
      [sort]="sort"
      [sortable]="true"
      [pageable]="true"
      [scrollable]="'virtual'"
      (dataStateChange)="dataStateChange($event)"
    >
      <ng-template kendoGridDetailTemplate let-dataItem>
        <!-- 在这里定义详细信息的展示方式 -->
      </ng-template>
    </kendo-grid>
  `
})
export class GridComponent {
  public gridData: GridDataResult;
  public pageSize = 10;
  public skip = 0;
  public sort: any[] = [];

  // 在这里定义主行和详细信息的数据
  private data: any[] = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Bob Johnson', age: 35 }
  ];

  constructor() {
    this.loadData();
  }

  public detail = (item: any) => item;

  public dataStateChange(state: DataStateChangeEvent): void {
    this.skip = state.skip;
    this.pageSize = state.take;
    this.sort = state.sort;

    this.loadData();
  }

  private loadData(): void {
    // 根据当前的分页、排序等信息从数据源中获取数据
    const sortedData = this.data.slice(0).sort((a, b) => {
      let res = 0;
      for (const column of this.sort) {
        res = column.dir === 'asc' ? a[column.field].localeCompare(b[column.field]) : b[column.field].localeCompare(a[column.field]);
        if (res !== 0) {
          break;
        }
      }
      return res;
    });

    const startIndex = this.skip;
    const endIndex = startIndex + this.pageSize;
    const gridData = sortedData.slice(startIndex, endIndex);

    this.gridData = {
      data: gridData,
      total: this.data.length
    };
  }
}