在Angular组件中使用Kendo UI实现两个相似数据网格间的行转移

Hey there! No worries at all—let's walk through how to set up drag-and-drop between two Kendo Angular Grids step by step, since I know the docs can be a bit sparse on this specific use case. 😊

1. 基础配置：给两个网格启用拖拽功能 #

首先，确保你的组件模块中导入了DragDropModule，然后给两个网格分别配置拖拽相关指令。关键是要设置一致的dragScope和dropScope，这样两个网格才能互相识别拖拽行为：

// 在你的组件模块中导入
import { DragDropModule } from '@progress/kendo-angular-grid';

// 源网格（拖拽发起方）模板配置
<kendo-grid
  [data]="sourceGridData"
  kendoGridDrag
  dragScope="gridRowTransfer"
>
  <!-- 你的列配置 -->
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
</kendo-grid>

// 目标网格（拖拽接收方）模板配置
<kendo-grid
  [data]="targetGridData"
  kendoGridDrop
  dropScope="gridRowTransfer"
  (drop)="onRowDrop($event)"
>
  <!-- 你的列配置 -->
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
</kendo-grid>

2. 核心逻辑：处理行的转移操作 #

在组件类中实现onRowDrop方法，完成从源网格移除行、添加到目标网格的核心逻辑。这里要注意数据不可变性，确保Kendo Grid能检测到数据变化并更新视图：

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

export class YourGridComponent {
  // 假设你的源数据和目标数据是这样的格式
  sourceGridData: Array<{id: number, name: string}> = [
    {id: 1, name: "Item 1"},
    {id: 2, name: "Item 2"}
  ];
  targetGridData: Array<{id: number, name: string}> = [];

  onRowDrop(event: GridDragEvent): void {
    // 获取拖拽的行数据
    const draggedRow = event.dataItem as {id: number, name: string};
    
    // 从源网格数据中移除该行（用唯一标识过滤，比如id）
    this.sourceGridData = this.sourceGridData.filter(item => item.id !== draggedRow.id);
    
    // 将该行添加到目标网格数据中（用扩展运算符保证不可变性）
    this.targetGridData = [...this.targetGridData, draggedRow];
  }
}

3. 新手友好的优化小技巧 #

• 视觉反馈增强：可以给拖拽中的行添加半透明效果，提升体验：

  /* 在组件样式中添加 */
  .k-grid tr.k-drag-hint {
    opacity: 0.7;
    background-color: #f5f5f5;
  }
  

• 避免重复拖拽：如果需要禁止同一行被重复拖拽，可以在onRowDrop里加个判断，检查目标网格是否已经存在该行。
• 调试小技巧：如果拖拽没反应，先检查dragScope和dropScope的字符串是否完全一致，这是新手最容易踩的坑！

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