Kendo Grid for Angular行重排问题：Ajax加载后拖拽失效

我之前也遇到过类似的场景，异步加载数据后行拖拽在视图变更前不生效，核心问题其实是拖拽初始化的时机没跟上Grid的DOM更新节奏。你之前尝试在Ajax回调里重新订阅事件，但只覆盖了第一次数据加载的情况，分页切换后Grid会重新渲染DOM，旧的绑定已经失效，而新的DOM元素没有被绑定拖拽事件。

下面给你两个靠谱的解决方案，都是围绕Grid的dataBound事件来做的——这个事件会在每次数据加载完成并渲染到DOM后触发，包括Ajax请求、分页、排序、过滤等操作，完美适配异步场景：

方案一：通过ViewChild操作Grid实例（推荐） #

这种方式更符合Angular的组件操作规范，避免直接操作DOM：

1. 修改app.component.ts #

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridDataResult, PageChangeEvent, GridComponent } from '@progress/kendo-angular-grid';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid
      #gridRef
      [data]="gridData"
      [pageable]="true"
      [pageSize]="10"
      (dataBound)="onGridDataBound()"
      (pageChange)="onPageChange($event)"
    >
      <kendo-grid-column field="id" title="ID"></kendo-grid-column>
      <kendo-grid-column field="name" title="Name"></kendo-grid-column>
      <!-- 你的其他列配置 -->
    </kendo-grid>
  `
})
export class AppComponent implements OnInit {
  public gridData: GridDataResult;
  private dataUrl = '你的API接口地址';
  
  // 通过ViewChild获取Grid组件实例
  @ViewChild('gridRef') grid: GridComponent;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadGridData();
  }

  loadGridData(page = 1, pageSize = 10) {
    this.http.get(`${this.dataUrl}?page=${page}&pageSize=${pageSize}`)
      .subscribe((res: any) => {
        this.gridData = {
          data: res.items,
          total: res.totalCount
        };
      });
  }

  onPageChange(event: PageChangeEvent) {
    this.loadGridData(event.page, event.pageSize);
  }

  onGridDataBound() {
    // 先销毁旧的拖拽实例，避免重复绑定导致异常
    if (this.grid.reorderable) {
      this.grid.reorderable.destroy();
    }
    // 重新启用行拖拽重排
    this.grid.reorderable = { rows: true };
  }
}

方案二：直接操作DOM（兼容旧版本场景） #

如果你的Kendo版本不支持通过组件实例直接操作reorderable，可以用这种方式：

1. 修改app.component.ts的dataBound回调 #

onGridDataBound() {
  const gridElement = document.querySelector('kendo-grid')?.nativeElement;
  if (!gridElement || !gridElement.kendoGrid) return;

  // 销毁旧的拖拽绑定
  if (gridElement.kendoGrid.reorderable) {
    gridElement.kendoGrid.reorderable.destroy();
  }
  // 重新初始化行拖拽
  gridElement.kendoGrid.setOptions({
    reorderable: { rows: true }
  });
}

2. 确保模块依赖正确导入（app.module.ts） #

不管用哪种方案，都要确认你已经导入了拖拽和Grid的核心模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { DragDropModule } from '@progress/kendo-angular-dragdrop';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule, GridModule, DragDropModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

为什么之前的Ajax回调方案失效？ #

Ajax回调只在第一次数据加载时执行一次，但分页切换后，Grid会重新渲染新的行元素，这些新元素没有被绑定拖拽事件；而dataBound事件会在每次数据渲染完成后触发，能保证所有新生成的DOM元素都被正确绑定拖拽逻辑。

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