Kendo Grid：使用 rowReorderable 时自定义拖动提示

Question

使用 rowReorderable 时是否可以自定义剑道网格上的行拖动提示？

Answer 1

1. 创建自定义行重新排序服务。在这种情况下，我只想在拖动提示中显示一个字段（

   functionalName

   ），而不是所有列：

import {RowReorderService} from '@progress/kendo-angular-grid';
import {ColumnList} from '@progress/kendo-angular-grid/columns/column-list';
import {Injectable, RendererFactory2} from '@angular/core';

@Injectable(
  {providedIn: 'root'}
)
export class AttributesListingRowReorderService extends RowReorderService {

  constructor(rendererFactory: RendererFactory2) {
    super(rendererFactory.createRenderer(null, null));
  }

  public override getDefaultHintText(_columns: ColumnList, data: any[]): string {
    const draggedDragRow = (this as any).getDragRowPerElement((this as any).dragTarget, data);
    const draggedDataItem = draggedDragRow?.dataItem;
    return draggedDataItem.functionalName;
  }
}

2. 自定义您的组件以添加对网格的引用，注入自定义行重新排序服务，并将自定义行重新排序服务分配给网格（代码片段如下所示）：

export class EntityAttributesListingComponent implements OnInit, OnDestroy, AfterViewInit {
  attributesListingRowReorderService = inject(AttributesListingRowReorderService);
  @ViewChild(GridComponent) grid!: GridComponent;

  ngAfterViewInit(): void {
    this.grid.rowReorderService = this.attributesListingRowReorderService;
  }
...
}

可以使用相同的方法自定义提示的其他方面。