选中或取消选中放置在 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 标签。 为我工作。