Angular 17 Kendo Grid实现表头与行内多选框及全选功能

1. 导入必要模块 #

确保你的组件（或NgModule）中导入Kendo Grid的复选框列模块：

import { GridModule, GridCheckboxColumnModule } from '@progress/kendo-angular-grid';

// 若使用Angular 17独立组件
@Component({
  selector: 'your-component',
  standalone: true,
  imports: [GridModule, GridCheckboxColumnModule],
  templateUrl: './your-component.component.html'
})

2. 添加复选框列到Grid #

在Grid的列配置中加入kendo-grid-checkbox-column，这是Kendo内置的复选框列组件，自动包含表头复选框和行复选框：

<kendo-grid
  [data]="gridData"
  [(selectedItems)]="selectedRows"
>
  <!-- 复选框列放在最前面 -->
  <kendo-grid-checkbox-column></kendo-grid-checkbox-column>
  
  <!-- 你的其他列配置 -->
  <kendo-grid-column field="name" title="名称"></kendo-grid-column>
  <kendo-grid-column field="age" title="年龄"></kendo-grid-column>
</kendo-grid>

3. 绑定选中数据数组 #

在组件类中定义数组存储选中的行数据，实现双向绑定：

import { Component } from '@angular/core';
// 替换为你的数据模型类型
interface User {
  id: number;
  name: string;
  age: number;
}

@Component({
  // ...组件配置
})
export class YourComponent {
  // 模拟Grid数据源
  gridData: User[] = [
    { id: 1, name: '张三', age: 28 },
    { id: 2, name: '李四', age: 32 },
    { id: 3, name: '王五', age: 25 }
  ];
  
  // 存储选中的行数据
  selectedRows: User[] = [];
}

4. 全选/取消全选功能说明 #

• 表头复选框默认自带全选逻辑：点击选中所有行，再次点击取消全选
• 当部分行被选中时，表头复选框会显示半选状态
• 选中的行数据会实时同步到selectedRows数组，可直接用于后续批量操作（如删除、导出）

5. 自定义样式（可选） #

如果需要调整复选框样式匹配需求，可通过CSS覆盖默认样式：

/* 调整复选框大小 */
.k-grid-checkbox-column .k-checkbox {
  transform: scale(1.2);
  margin-right: 8px;
}

/* 调整表头复选框的垂直位置 */
.k-grid-header .k-grid-checkbox-column .k-checkbox {
  margin-top: 4px;
}

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