Angular下Kendo Grid如何按条件禁用指定行的kendoGridSelectAllCheckbox

核心实现思路 #

你当前使用的是Kendo Grid默认生成的行复选框，只要自定义复选框列的单元格模板，给复选框绑定disabled属性即可实现按条件禁用，同时需要配套调整全选逻辑避免选中禁用行。

具体实现步骤 #

1. 自定义行复选框模板 #

修改你的kendo-grid-checkbox-column配置，添加单元格模板，在模板中手动渲染复选框，绑定你的自定义禁用条件：

<kendo-grid-checkbox-column [headerClass]="'data-grid-header'" width="40">
  <!-- 原有头部全选模板保持不变 -->
  <ng-template kendoGridHeaderTemplate class="data-grid-header" let-dataItem>
    <input
      class="k-checkbox"
      id="selectAllCheckboxId"
      kendoGridSelectAllCheckbox
      [state]="selectAllState"
      (selectAllChange)="onSelectAllChange($event)"
    />
    <label class="k-checkbox-label" for="selectAllCheckboxId"></label>
  </ng-template>
  <!-- 新增行单元格模板，自定义复选框 -->
  <ng-template kendoGridCellTemplate let-dataItem>
    <input
      class="k-checkbox"
      [id]="'checkbox_' + dataItem.Id"
      [kendoGridSelectionCheckbox]="dataItem.Id"
      <!-- 这里替换为你自己的业务禁用条件 -->
      [disabled]="dataItem.isDisabled || dataItem.status === '已归档'"
    />
    <label class="k-checkbox-label" [for]="'checkbox_' + dataItem.Id"></label>
  </ng-template>
</kendo-grid-checkbox-column>

说明：kendoGridSelectionCheckbox指令会自动关联Grid的选中逻辑，不需要手动处理选中状态同步。

2. 调整全选逻辑，排除禁用行 #

修改你的onSelectAllChange方法，全选时只选择符合条件的非禁用行，和上面的禁用规则保持一致即可：

public onSelectAllChange(e: SelectAllCheckboxState): void {
  if (e === 'checked') {
    // 过滤掉禁用的行，只选非禁用数据的Id
    this.selectedIds = this.gridView.data
      .filter(item => !item.isDisabled && item.status !== '已归档')
      .map(item => item.Id);
  } else {
    this.selectedIds = [];
  }
  // 同步全选状态
  this.selectAllState = e;
}

3. 可选：禁止误选禁用行 #

如果后续你取消了checkboxOnly: true配置，需要在selectedKeysChange事件中过滤掉禁用行的Id，避免行点击触发选中：

public onSelectedKeysChange(keys: number[]): void {
  const validIds = keys.filter(id => {
    const item = this.gridView.data.find(i => i.Id === id);
    return item && !item.isDisabled && item.status !== '已归档';
  });
  this.selectedIds = validIds;
}

内容的提问来源于stack exchange，提问作者lock42