如何自定义Telerik Header Context Menu 新增按钮并修改标签

仅通过给HeaderContextMenu设置自定义CSS类的方案仅能调整菜单样式，无法实现新增功能按钮、修改现有按钮显示标签的需求，可通过以下两种方式完成自定义：

方案一：通过服务端事件修改菜单配置 #

• 绑定RadGrid的HeaderContextMenu的ItemCreated事件，在菜单初始化渲染阶段直接修改现有项文本、插入自定义功能项
• 服务端代码示例：

protected void RadGrid1_HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
{
    // 修改现有菜单项的显示标签
    if (e.Item.Text == "Sort Ascending")
    {
        e.Item.Text = "升序排列";
    }
    if (e.Item.Text == "Sort Descending")
    {
        e.Item.Text = "降序排列";
    }
    if (e.Item.Text == "Columns")
    {
        e.Item.Text = "列显示设置";
    }
    // 插入自定义功能按钮
    if (e.Item is RadMenuItem && e.Item.Value == "ColumnsContainer")
    {
        RadMenuItem customItem = new RadMenuItem();
        customItem.Text = "导出当前列数据";
        customItem.Value = "CustomExportColumn";
        // 前端触发逻辑则关闭回发
        customItem.PostBack = false;
        customItem.Attributes.Add("onclick", "handleCustomColumnAction()");
        (sender as RadContextMenu).Items.Add(customItem);
    }
}

• 事件绑定方式：在RadGrid标签中添加对应的OnHeaderContextMenu事件绑定属性即可生效。

方案二：通过客户端JavaScript动态修改菜单 #

• 若不需要走服务端回发逻辑，可绑定菜单的OnClientShowing客户端事件，在菜单弹出前完成配置修改
• 前端代码示例：

function headerMenuShowing(sender, args) {
    // 遍历现有菜单项修改显示文本
    var menuItems = sender.get_items();
    for (var i = 0; i < menuItems.get_count(); i++) {
        var item = menuItems.getItem(i);
        switch (item.get_text()) {
            case "Sort Ascending":
                item.set_text("升序排列");
                break;
            case "Sort Descending":
                item.set_text("降序排列");
                break;
            case "Columns":
                item.set_text("列显示控制");
                break;
        }
    }
    // 新增自定义按钮，先判断避免重复添加
    var existingCustomItem = menuItems.findItemByValue("CustomResetColumn");
    if (!existingCustomItem) {
        var customItem = new Telerik.Web.UI.RadMenuItem();
        customItem.set_text("重置列宽");
        customItem.set_value("CustomResetColumn");
        customItem.add_clicked(function() {
            // 自定义功能逻辑：例如重置当前点击列的宽度为默认值
            var targetColumn = args.get_gridColumn();
            targetColumn.set_width("150px");
        });
        menuItems.add(customItem);
    }
}

• 事件绑定方式：在RadGrid的<ClientSettings><ClientEvents>节点中添加OnHeaderContextMenuShowing="headerMenuShowing"属性即可。

注意：如果自定义按钮需要触发服务端逻辑，可将按钮的PostBack属性设为true并指定对应CommandName，在RadGrid的ItemCommand事件中捕获该命令名处理业务逻辑即可。

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