選中或取消選中放置在 kendo-grid 行上的 kendo-checkbox 不起作用

Question

我正在嘗試通過 Telerik 的文檔在劍道網格中添加一個復選框列。 當我嘗試選中或取消選中一行中的復選框時，它不起作用。

這是我的 html：

<kendo-grid
    [data]="gridView"
    [selectable]="selectableSettings"
    [height]="317"
    [kendoGridSelectBy]="getWholeItemRow"
    [selectedKeys]="mySelection"
    (selectedKeysChange)="onSelectedKeysChange($event)"
    (remove)="confirmDeleteItemFromGrid($event)">
      <ng-template
      kendoGridToolbarTemplate>
        <button
        [disabled]='mySelection.length === 0'
        mat-flat-button
        class="btn-danger btn-sm"
        (click)="removeSelectedItems()">Remove selected items</button>
      </ng-template>
      <kendo-grid-checkbox-column width="15" showSelectAll="true" [columnMenu]="false" >
          <ng-template kendoGridHeaderTemplate>
              <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox
                  [state]="selectAllState"
                  (selectAllChange)="onSelectAllChange($event)">
              <label class="k-checkbox-label"
               for="selectAllCheckboxId"></label>
          </ng-template>
      </kendo-grid-checkbox-column>
    ...
</kendo-grid>

TS：

export class ImagesGridComponent implements OnInit{

  @Input() captures: Array<Image>;
  @Input() positionSection: number;
  selectedImages: any[] = [];
  public selectAllState: SelectAllCheckboxState = 'unchecked';
  public mySelection: any[] = [];
  public gridView: GridDataResult;

  public selectableSettings: SelectableSettings = {
    enabled: false,
    checkboxOnly: false,
    mode: 'multiple'
  };

  constructor(){}

  ngOnInit(): void {
    this.loadItems();
  }

Function 返回存儲在行中的 object。 用於 [kendoGridSelectBy]：

  getWholeItemRow(context: RowArgs) {
    return context.dataItem;
  }

更新 [selectedKeys] 集合時應觸發的 Function：（不工作）

public onSelectedKeysChange(e) {
  const len = this.mySelection.length;

  if (len === 0) {
      this.selectAllState = 'unchecked';
  } else if (len > 0 && len < this.captures.length) {
      this.selectAllState = 'indeterminate';
  } else {
      this.selectAllState = 'checked';
  }
}

Function 在選中/取消選中 header 復選框時使用：

public onSelectAllChange(checkedState: SelectAllCheckboxState) {
  if (checkedState === 'checked') {
      this.mySelection = this.captures;
      this.selectAllState = 'checked';
  } else {
      this.mySelection = [];
      this.selectAllState = 'unchecked';
  }
}

用於填充網格：

  loadItems() {
    this.gridView = {
      data: this.captures,
      total: this.captures.length
    };
  }
}

謝謝你。

更新：

我編輯了 selectableSettings object 現在可以工作了：

public selectableSettings: SelectableSettings = {
    enabled: true,
    checkboxOnly: true,
    mode: 'multiple'
  };

Answer 1

在您的劍道網格元素中添加以下屬性：

HTML：

<kendo-grid [selectable]="selectableSettings" [kendoGridSelectBy]="onSelectedKey" [selectedKeys]="selectedData">
        <kendo-grid-checkbox-column showSelectAll="true" [columnMenu]="false">
        </kendo-grid-checkbox-column>
</kendo-grid>

TS：

public setSelectableSettings(): void {
  this.selectableSettings = {
    checkboxOnly: false,
    mode: 'multiple',
  };
}

// This method is used to get the checked record data 
public onSelectedKey(context: RowArgs): any {
  return context.dataItem;
}

劍道 API 參考：

https://www.telerik.com/kendo-angular-ui/components/grid/api/CheckboxColumnComponent/

Answer 2

您似乎為復選框提供了錯誤的 class。 您使用的是k-radio而不是k-checkbox 。 如下圖修改，

<input type="checkbox" class="k-checkbox" id="selectAllCheckboxId"
    kendoGridSelectAllCheckbox [state]="selectAllState"
    (selectAllChange)="onSelectAllChange($event)"/>

Answer 3

它需要是一個輸入 html 標簽。 為我工作。