Angular2+中如何实现Kendo Grid列菜单选项字母排序

需求说明 #

• 现有Kendo Grid共4列，实际展示顺序为：| ID | Name | Last Name | Assignee |
• 默认点击「Columns」弹出的列显隐选择菜单会跟随Grid实际列顺序展示，需要将菜单内选项调整为按字母顺序排序，且排序仅作用于菜单本身，不修改Grid内列的实际展示顺序
• 期望的菜单列选项顺序：
  • Assignee
  • ID
  • Last Name
  • Name
• 已知jQuery、AngularJS版本Kendo Grid可通过columnMenuInit事件调整列菜单顺序，不确定Angular 2+版本的实现方式

实现方案 #

根据项目中使用的Kendo Grid类型选择对应方案即可：

方案1：使用原生Angular版Kendo Grid（@progress/kendo-angular-grid依赖包） #

原生Angular版组件未直接暴露columnMenuInit事件，可通过关闭默认自动生成的列选择列表、传入自定义排序列表的方式实现，代码示例：

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

@Component({
  selector: 'app-custom-grid',
  template: `
    <kendo-grid
      [data]="gridData"
      [columnMenu]="{ enabled: true, autoGenerateColumnChoices: false }"
    >
      <!-- 自定义列菜单模板 -->
      <ng-template kendoGridColumnMenuTemplate let-service="service">
        <kendo-grid-columnmenu-sort></kendo-grid-columnmenu-sort>
        <kendo-grid-columnmenu-filter></kendo-grid-columnmenu-filter>
        <!-- 传入排序后的列列表 -->
        <kendo-grid-columnmenu-chooser
          [columns]="sortedColumnList"
          [service]="service"
        ></kendo-grid-columnmenu-chooser>
      </ng-template>

      <!-- 保持原有列顺序不变 -->
      <kendo-grid-column field="id" title="ID" width="100"></kendo-grid-column>
      <kendo-grid-column field="name" title="Name" width="200"></kendo-grid-column>
      <kendo-grid-column field="lastName" title="Last Name" width="200"></kendo-grid-column>
      <kendo-grid-column field="assignee" title="Assignee" width="200"></kendo-grid-column>
    </kendo-grid>
  `
})
export class CustomGridComponent {
  @ViewChild(GridComponent) private grid: GridComponent;
  public gridData: unknown[] = []; // 替换为实际业务数据

  get sortedColumnList(): ColumnBase[] {
    // 提取所有带标题的列，按标题做字母升序排序
    return [...this.grid.columns]
      .filter(column => column.title)
      .sort((prev, curr) => prev.title.localeCompare(curr.title));
  }
}

该方案不会改动Grid本身的列渲染顺序，仅调整列菜单内的选项排列顺序，完全匹配需求。

方案2：Angular项目中封装使用jQuery版Kendo Grid #

这种场景的实现逻辑和AngularJS版本完全一致，直接在Grid初始化配置中绑定columnMenuInit事件调整菜单项顺序即可，代码示例：

// Grid初始化逻辑
$('#targetGrid').kendoGrid({
  dataSource: gridDataSource, // 替换为实际数据源
  columnMenu: true,
  columns: [
    { field: "id", title: "ID" },
    { field: "name", title: "Name" },
    { field: "lastName", title: "Last Name" },
    { field: "assignee", title: "Assignee" }
  ],
  columnMenuInit: function(e) {
    // 提取列选择项
    const columnItems = e.container.find('.k-column-list li').get();
    // 按选项文本排序
    columnItems.sort((a, b) => $(a).text().trim().localeCompare($(b).text().trim()));
    // 重新插入排序后的选项
    columnItems.forEach(item => $(item).appendTo(e.container.find('.k-column-list')));
  }
});

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