Javascript 列菜单项列表自定义

目前，我正在研究Angular 2的SyncFusion grid，发现了一个很好的功能——打开列菜单，将所有控件（排序、分组、筛选）放在一个地方

但这还不足以满足我的需要，我正在寻找自定义列菜单中项目列表的方法，例如，我希望能够使用自定义操作添加我的项目，以便在单击/选择用户操作时做出反应

例如，我想添加一个项目来直接隐藏当前列或固定此列

你能告诉我这是否可能，如果可能的话如何实施吗？或者我应该为此操作创建一个自定义组件

---

提前谢谢。

好了，伙计们，我在文档的TypeScript部分找到了问题的解决方案，对吗

不幸的是，它现在不能像演示中显示的那样工作。但他们表示，这个问题已经存在，发布日期将是今天，2018年1月10日

这里是一个工作的TypeScript版本

import { Grid, ColumnMenu, Sort, Page } from '@syncfusion/ej2-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import { data  } from './datasource.ts';

Grid.Inject(ColumnMenu, Page, Sort);
// The problem is in the base constant value
// columnMenuClick should have a value "columnMenuClick"
// but it has a value "contextMenuClick" like contextMenuClick constant for context menu
let grid: Grid = new Grid({
    dataSource: data,
    allowPaging: true,
    allowSorting: true,
    showColumnMenu: true,
    columnMenuItems:[{text:'Clear Sorting', id:'gridclearsorting'}],
    contextMenuClick: function(args: MenuEventArgs){
        if(args.item.id === 'gridclearsorting'){
            grid.clearSorting();
        }
    },
    sortSettings:{
        columns:[{direction: "ascending", field: "OrderID"}]
    },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'right', showInColumnChooser: false },
        { field: 'Freight', width: 150, format: 'C2', textAlign: 'right', editType: 'numericedit' },
        { field: 'ShipName', headerText: 'Ship Name', width: 300 },
        { field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 },
        { field: 'ShipCity', headerText: 'Ship City', width: 200 }
    ]
});
grid.appendTo('#Grid');

这里是一个角度4版本的工作。

Essential JS 2 Grid v 15.4.24已经发布，并且包含了“上下文菜单事件触发”的问题修复。请找到下面的工作plunker示例

columnMenuClick(args){
    if(args.item.id === 'gridclearsorting'){
        this.grid.clearSorting();
    }
}

---

在该示例中，我们添加了自定义列菜单选项以清除网格排序。

您应该升级到版本5。版本2已经有一年多的历史了，并且包含很多不推荐使用的模块。对不起，我的错误。我们使用最新的角度版本。但是，如果有可能使用Angular 5以这种方式操纵同步融合网格？

columnMenuClick(args){
    if(args.item.id === 'gridclearsorting'){
        this.grid.clearSorting();
    }
}