如何在Kendo Grid筛选行中显示kendoGridSelectAllCheckbox？

以下代码可正常在表头行添加全选复选框：

<kendo-grid-checkbox-column [showSelectAll]="true">
    <ng-template kendoGridHeaderTemplate>
        <input class="chk-status" kendoGridSelectAllCheckbox />
    </ng-template>
    <ng-template kendoGridCellTemplate let-idx="rowIndex">
        <input class="chk-status" [kendoGridSelectionCheckbox]="idx" />
    </ng-template>
</kendo-grid-checkbox-column>

但修改后在筛选行添加全选复选框时无法正常工作：

<kendo-grid-checkbox-column [showSelectAll]="true">
    <ng-template kendoGridHeaderTemplate>
        <span>Ready to sent</span>
    </ng-template>
    <ng-template kendoGridFilterCellTemplate>
        <input class="chk-status" kendoGridSelectAllCheckbox />
    </ng-template>
    <ng-template kendoGridCellTemplate let-idx="rowIndex">
        <input class="chk-status" [kendoGridSelectionCheckbox]="idx" />
    </ng-template>
</kendo-grid-checkbox-column>

问题原因 #

kendoGridSelectAllCheckbox是Kendo Grid专为表头单元格设计的指令，它内部绑定了表头的全选逻辑，依赖表头上下文触发选择操作。放到筛选单元格（kendoGridFilterCellTemplate）中时，指令无法匹配正确的选择上下文，因此不会生效。

解决方案 #

要在筛选行实现全选，需手动编写逻辑，通过网格API控制选中状态：

1. 给网格添加模板引用变量（如#grid）
2. 给筛选行复选框绑定点击事件，手动调用网格选择方法
3. 同步复选框选中状态与网格全选状态

示例代码：

<kendo-grid #grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
    <kendo-grid-checkbox-column [showSelectAll]="false">
        <ng-template kendoGridHeaderTemplate>
            <span>Ready to sent</span>
        </ng-template>
        <ng-template kendoGridFilterCellTemplate>
            <input 
                class="chk-status" 
                type="checkbox" 
                (change)="toggleAllSelection(grid, $event.target.checked)"
                [checked]="isAllSelected(grid)"
            />
        </ng-template>
        <ng-template kendoGridCellTemplate let-idx="rowIndex">
            <input class="chk-status" [kendoGridSelectionCheckbox]="idx" />
        </ng-template>
    </kendo-grid-checkbox-column>
    <!-- 其他列配置 -->
</kendo-grid>

对应的组件逻辑：

import { Component } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent {
    public gridData: any[] = /* 你的数据源 */;

    toggleAllSelection(grid: GridComponent, isChecked: boolean): void {
        isChecked ? grid.selectAll() : grid.deselectAll();
    }

    isAllSelected(grid: GridComponent): boolean {
        // 适配分页/筛选场景，取当前视图数据判断
        const viewData = grid.view.data;
        const selectedKeys = grid.selectedKeys;
        // 假设数据有唯一标识字段id，根据实际情况修改
        return viewData.length > 0 && viewData.every(item => selectedKeys.includes(item.id));
    }
}

注意事项 #

• 确保网格selectable配置开启复选框选择模式（checkboxOnly: true）
• 如果数据源无唯一标识字段，可根据rowIndex或其他唯一属性调整选中判断逻辑

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