有沒有辦法在 Kendo Grid 中為 Angular 選擇 2 個 collections 行

Question

我正在嘗試創建一個網格，用戶可以在其中 select 復制數據以進行合並。 我打算有 2 個復選框列。 一個復選框將表示要保留的記錄 ID，另一個將跟蹤要更改的記錄 ID。 我的計划是使用正常的選定行功能並為“子”記錄創建另一個選定行的集合。 我一直堅持從 ChildClick 調用中獲取行數據。 有人可以告訴我我錯過了什么嗎？

這是劍道網格標記。

<div class="container-fluid">
  <div class="row">
    <div class="col-12"> </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="grid-container grid-container--scrollable">
        <kendo-grid #grid="kendoGrid" [kendoGridBinding]="gridView" [scrollable]="'none'" [pageSize]="pageSize"
          [skip]="skip" [pageable]="true" filterable="menu" (pageChange)="onPageChange($event)"
          [selectable]="{ enabled: true, checkboxOnly: true, mode: multiple }" [selectedKeys]="selectedRows"
          [kendoGridSelectBy]="selectedRowsHandler">

          <ng-template kendoGridToolbarTemplate>

          </ng-template>
          <kendo-grid-checkbox-column width="40">
            <ng-template kendoGridCellTemplate let-idx="rowIndex">
              <label for="row-{{ idx }}">
                <input [kendoGridSelectionCheckbox]="idx" type="checkbox" id="parentRow-{{ idx }}" />
              </label>
            </ng-template>
          </kendo-grid-checkbox-column><kendo-grid-column field="" title="" width="40">
            <ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
              <input type="checkbox" id="childRow{{ idx }}" onclick="ChildSelect($event)" />
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="firstName" title="First Name"></kendo-grid-column>
          <kendo-grid-column field="lastName" title="Last Name"></kendo-grid-column>

          <kendo-grid-column field="companyName" title="Company Name"></kendo-grid-column>

          <kendo-grid-column field="communicationMethods" title="Communication"> </kendo-grid-column>
          <kendo-grid-column field="city" title="City"></kendo-grid-column>
          <kendo-grid-column field="state" title="State"></kendo-grid-column>

          <kendo-grid-column field="activityCount" title="Activity"></kendo-grid-column>
          <kendo-grid-column field="subscriptionCount" title="Subscriptions"></kendo-grid-column>
        </kendo-grid>
      </div>
      <div>&nbsp;</div>
      <div>
        <button kendoButton (click)="onClick()" (focus)="onFocus()" (blur)="onBlur()">
          Merge
        </button>
      </div>
    </div>
  </div>
</div>

這是 typescript。

import { Component, OnInit } from '@angular/core';
import { ContactModel } from '../../models/contact.model';
import { ContactService } from '../../services/contact.service';
import { CoreModule } from '../../../core/core.module';
import { RowArgs } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-all-contacts',
  templateUrl: './all-contacts.component.html',
  styleUrls: ['./all-contacts.component.scss']
})
export class AllContactsComponent implements OnInit {
  public pageSize: number = 25;
  public skip: number = 0;
  public filterText: string;

  public gridData: any[];
  public gridView: any[];

  public loading: boolean = false;

  public selectedRows: ContactModel[] = [];

  constructor(
    private contactService: ContactService
  ) { }

  ngOnInit(): void {
    this.loading = true;
    this.contactService.getAll().subscribe(contacts => {
      this.gridData = contacts;
      this.gridView = contacts;
      this.loading = false;
    });
  }

  // Grid pagination
  public onPageChange(state: any): void {
    this.skip = state.skip;
    this.pageSize = state.take;
  }

  selectedRowsHandler(context: RowArgs): any {
    return context.dataItem;
  }

  private rowsSelected: number[] = [];
  private childrenSelected: number[] = [];

  private rowsSelectedKeys(context: RowArgs): number {
    return context.dataItem.id;
  }

  private selectAllRows(e): void {
    if (e.target.checked) {
      this.rowsSelected = this.gridData.map(o => o.id);
    } else {
      this.rowsSelected = [];
    }
  }

  private ChildSelect(e): void {
    console.log(this.gridView[e.index]);
  }

}

謝謝

Answer 1

我想出了一個解決辦法。

html

<ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
              <input type="checkbox" id="childRow{{ idx }}" (change)="childClick($event, idx)" name="childRow{{ idx }}" value="{{ dataItem.id }}" />
            </ng-template>

Typescript

 public childClick(e, idx) {
    console.log(e.target.value);
    console.log(e.target.checked);

    if (e.target.checked) {
      this.selectedChildren.push(e.target.value);
    }
  }