解决Kendo Angular Grid自定义选中逻辑与视觉状态不同步问题

问题描述 #

我给Kendo Grid配置了(selectionChange)属性，通过自定义的selectionService.ts处理选中逻辑：

(selectionChange)="selectionService.onSelectionChange($event)"

需求是：选中1条或恰好2条数据时正常执行逻辑；选中第3条数据时，移除最早选中的那条，最终只保留最后选中的2条（例如选中第3条后，选中集合变为[2,3]）。

当前实现的选中逻辑代码如下：

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
}

目前选中逻辑可正常运行，但Kendo Grid的视觉选中状态未同步更新：选中第3条数据后，最早选中的那条仍显示为选中状态。如何让Grid的视觉选中状态与自定义选中逻辑保持一致？

解决方案 #

问题核心在于你仅更新了自定义的selectedItems集合，但未通知Kendo Grid同步内部的选中状态。以下是两种高效的解决方式：

方案一：利用Grid实例的API手动同步状态 #

1. 在组件中获取Grid实例：

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

@Component({
  // 组件元数据
})
export class YourGridComponent {
  @ViewChild(GridComponent) grid!: GridComponent;

  // 将grid实例传入selectionService的onSelectionChange方法
  onGridSelectionChange(event: SelectionEvent) {
    this.selectionService.onSelectionChange(event, this.grid);
  }
}

2. 修改模板绑定：

<kendo-grid
  (selectionChange)="onGridSelectionChange($event)"
  ...其他属性
>
</kendo-grid>

3. 更新selectionService的逻辑，在处理完选中集合后同步视觉状态：

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

export class SelectionService {
  selectedItems: any[] = [];

  public onSelectionChange(event: SelectionEvent, grid: GridComponent): void {
    // 执行原有选中逻辑
    if (this.selectedItems.length + event.selectedRows!.length > 2) {
      this.selectedItems.shift();
    }

    for (let row of event.selectedRows!) {
      this.selectedItems.push(row.dataItem);
    }

    this.selectedItems = this.selectedItems.filter(
      item => !event.deselectedRows!.some(row => row.dataItem === item)
    );

    // 同步Grid视觉状态：先清空所有选中，再重新选中目标项
    grid.deselectAll();
    this.selectedItems.forEach(item => {
      const rowIndex = grid.data.findIndex(dataItem => dataItem === item);
      if (rowIndex !== -1) {
        grid.selectRow(rowIndex);
      }
    });
  }
}

方案二：双向绑定selectedKeys属性（推荐） #

这种方式更贴合Kendo Grid的设计逻辑，无需手动操作Grid实例：

1. 在Grid模板中添加[(selectedKeys)]绑定：

<kendo-grid
  [(selectedKeys)]="selectionService.selectedKeys"
  (selectionChange)="selectionService.onSelectionChange($event)"
  ...其他属性
>
</kendo-grid>

2. 在selectionService中维护selectedKeys集合（需使用数据的唯一标识作为key，比如id）：

import { SelectionEvent } from '@progress/kendo-angular-grid';

export class SelectionService {
  selectedItems: any[] = [];
  selectedKeys: any[] = []; // 存储选中项的唯一标识

  public onSelectionChange(event: SelectionEvent): void {
    // 处理超过2条的情况：移除最早选中项
    if (this.selectedItems.length + event.selectedRows!.length > 2) {
      const removedItem = this.selectedItems.shift();
      const removedKeyIndex = this.selectedKeys.indexOf(removedItem.id);
      if (removedKeyIndex !== -1) {
        this.selectedKeys.splice(removedKeyIndex, 1);
      }
    }

    // 添加新选中项
    for (let row of event.selectedRows!) {
      this.selectedItems.push(row.dataItem);
      this.selectedKeys.push(row.dataItem.id);
    }

    // 处理取消选中的项
    const deselectedKeys = event.deselectedRows!.map(row => row.dataItem.id);
    this.selectedItems = this.selectedItems.filter(item => !deselectedKeys.includes(item.id));
    this.selectedKeys = this.selectedKeys.filter(key => !deselectedKeys.includes(key));
  }
}

Grid会自动监听selectedKeys的变化，同步更新视觉选中状态，无需额外手动操作。

内容的提问来源于stack exchange，提问作者B.Quaink