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

【问题标题】：Checking or unchecking a kendo-checkbox placed on a kendo-grid row does not work选中或取消选中放置在 kendo-grid 行上的 kendo-checkbox 不起作用
【发布时间】：2019-11-21 16:49:36
【问题描述】：

我正在尝试通过 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();
  }

返回存储在行中的对象的函数。用于[kendoGridSelectBy]：


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

当 [selectedKeys] 集合更新时应该触发的函数：（不工作）



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';
  }
}

选中/取消选中标题复选框时使用的功能：

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 对象，现在可以工作了：

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

【问题讨论】：

标签： angular kendo-ui kendo-grid

【解决方案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/

【讨论】：

谢谢.. 我正在接近这个想法，但仍然没有工作。我将添加我的 .ts 以获取更多信息。
当然。我添加了 Kendo Grid 复选框列 API 参考链接。请看一下
谢谢，我去看看文档。

【解决方案2】：

您似乎为复选框提供了错误的类。您使用的是k-radio 而不是k-checkbox。如下图改一下，

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

【讨论】：