将行动态添加到 KendoUI Angular Grid

Question

我正在研究 KendoUI Angular 网格。 我需要添加相同的一组控件（开始时间 - 时间选择器和结束时间 - 时间选择器）作为父行的子行，并在操作列中使用删除按钮。

目前我能够复制同一行并将其添加到网格的末尾。 目前我被困在那里。 我需要添加与其主行的子行相同的控件。 例如：- 星期一可以有四个开始时间和结束时间timepickers ，其中一个是带有删除按钮的子行。 任何帮助将非常感激。

这是我的代码：

模板：

<kendo-grid [data]="availabilityGridData" (cellClick)="onToggle($event)" [sortable]="true" [pageable]="true"
        scrollable="none" (dataStateChange)="dataStateChange($event)">


        <kendo-grid-column title="Availability" width="120">
            <ng-template kendoGridCellTemplate let-dataItem>
                <input (change)="checkedChanged(dataItem)" type="checkbox" [checked]="dataItem.dayOfWeek!=='Sunday'"
                    [disabled]="dataItem.dayOfWeek=='Sunday'" />
            </ng-template>

        </kendo-grid-column>


        <kendo-grid-column field="dayOfWeek" title="Day Of Week" width="200"></kendo-grid-column>

        <kendo-grid-column title="Start Time" width="120">
            <ng-template kendoGridCellTemplate let-dataItem>
                <kendo-timepicker [steps]="{ hour: 1, minute: 15, second: 00}" [max]="dataItem.endTime"
                    (valueChange)="onStartTimeChange(dataItem, startTime.value)" [format]="'HH:mm'"
                    [value]="dataItem.startTime"
                    [disabled]="dataItem.dayOfWeek=='Sunday'|| dataItem.availability==false" #startTime>
                </kendo-timepicker>
            </ng-template>
        </kendo-grid-column>


        <kendo-grid-column title="End Time" width="120">
            <ng-template kendoGridCellTemplate let-dataItem>
                <kendo-timepicker [steps]="{ hour: 1, minute: 15, second: 00}" [min]="dataItem.startTime"
                    (valueChange)="onEndTimeChange(dataItem, endTime.value)" [value]="dataItem.endTime"
                    [format]="'HH:mm'" [disabled]="dataItem.dayOfWeek=='Sunday'|| dataItem.availability==false"
                    #endTime>
                </kendo-timepicker>
            </ng-template>
        </kendo-grid-column>

        <kendo-grid-column title="Work Location" [sortable]="false">
            <ng-template kendoGridCellTemplate let-dataItem>
                <kendo-dropdownlist [data]="userWorkLocation" [valuePrimitive]="true" [valueField]="'id'"
                    [disabled]="dataItem.dayOfWeek=='Sunday'|| dataItem.availability==false"
                    [textField]="'displayValue'" (valueChange)="onStatusChanged()" [defaultItem]="userWorkLocation[0]"
                    [(ngModel)]="status">
                </kendo-dropdownlist>
            </ng-template>
        </kendo-grid-column>

        <kendo-grid-column field="Action" [sortable]="false">
            <ng-template kendoGridCellTemplate let-dataItem>
                <button [disabled]="dataItem.dayOfWeek=='Sunday'|| dataItem.availability==false"
                    (click)=addItem(dataItem)>Add</button>
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

typescript controller：

export class UserAvailabilityComponent implements OnInit {
  public availabilityGridData: any;
  public date: Date = new Date();
  public userWorkLocation: any = [{ id: 1, displayValue: 'Home Location' }, { id: 2, displayValue: 'Some Location' }]
  public status: any

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getTimeSlotsForAvailabilityTemplate().subscribe((gridData) => {
      this.availabilityGridData = gridData;
    });
  }

  public dataStateChange(event): void {
    console.log(event);

  }

  onChange(event) {
    console.log(event);

  }

  public checkedChanged(event) {
    console.log(event)
    event.availability = !event.availability;
  }

  onStartTimeChange(event, value) {
    console.log(event);
    console.log(value);
    event.startTime = value;
  }

  onEndTimeChange(event, value) {
    console.log(event);
    console.log(value);
    event.endTime = value;
  }

  addItem(dataItem) {
    console.log(dataItem);
    let newDataItem = JSON.parse(JSON.stringify(dataItem))
    newDataItem.startTime = null
    newDataItem.endTime = null
    newDataItem.userWorkLocation = 0;
    this.availabilityGridData.push(newDataItem);
  }

  onStatusChanged() {
    
  }

}