将附加数据添加到 Kendo UI 上下文菜单项

Question

我想在我的应用程序中使用 Kendo UI 上下文菜单。我期待在菜单本身中显示文本的标准行为，但将不同的值（ID 或密钥）返回给 select 事件处理程序。

例如，菜单显示了一个名称列表，但是当我单击其中一个时，我得到了与该名称关联的 ID。

我已经尝试将 text 之外的其他属性添加到上下文菜单中的项目数组，但我没有在处理程序的事件对象上看到它们。

我无法使用文本找到与其匹配的适当 ID，因为可能存在具有相同文本但 ID 不同的条目。

有什么想法吗？

编辑：

目前我是这样构建上下文菜单的：

open: (e) => {
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => {
        return {
            text: "<div data-item-key='" + itemKey + "'>Test Text</div>",
            cssClass: "context-menu-item",
            encoded: false
        };
    }));
}

虽然这个解决方案确实满足了我的需求，但它为 DOM 添加了一个额外的元素，虽然微不足道，但并不完美...

Answer 1

选项 1) 您可以添加一个数据来指定您的 ID。我用 mvc wrapper 做了这个，但它也可以用纯 javascript 来完成。

@(Html.Kendo()
    .ContextMenu()
    .Name("contextMenuGridTicketTestiMessaggi")
    .Target("#gridTicketTestiMessaggi")
    .Filter("tr")
    .Orientation(ContextMenuOrientation.Vertical)
    .Items(items =>
    {
        items.Add().Text("Update").HtmlAttributes(new { data_toggle = "update" });
        items.Add().Text("Save").HtmlAttributes(new { data_toggle = "save" });
        items.Add().Text("Delete").HtmlAttributes(new { data_toggle = "delete" });
    })
    .Events(e => {
        e.Select("contextMenuGridTicketTestiMessaggiSelect"); 
    }));

    var contextMenuGridTicketTestiMessaggiSelect = function(e) {
        var action = $(e.item).data("toggle");
        var that = this;
        if (action === "update") {}
    ...

选项 2) 您可以为每个项目（通过 html 内容）定义一个函数，以便在特定项目的每个 onClick 事件中调用。

items.Add().Encoded(false).Text("<span onclick='update()'>Update</span>");
items.Add().Encoded(false).Text("<span onclick='delete()'>Delete</span>");
...

更新

<div id="target">Target</div>
<ul id="context-menu"></div>
<script>
    $("#context-menu").kendoContextMenu({
        target: "#target",
        open: function(e) {
            let itemKeys = [1, 2, 3];

            let menu = e.sender;                 
            menu.remove(".context-menu-item");
            menu.setOptions({
                dataSource: itemKeys.map((itemKey) => {
                    return {
                        text: "<div data-item-key='" + itemKey + "' style='white-space: nowrap'>Test Text</div>",
                        cssClass: "context-menu-item",
                        encoded: false
                    };
                })
            });
        },
        select: function(e) {
           console.log($($(e.item).find("div")[0]).data("item-key"))                      
        }
    });
</script>

Answer 2

它没有记录，但 ContextMenu 实际上继承自 Menu. Therefore, all options of Menu are available. In particular, you can add an attr object to your data items, cf the example in the documentation。

要完成您的示例：

open: (e) => {
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => {
        return {
            text: "Test Text",
            cssClass: "context-menu-item",
            // add whatever attribute
            attr: {
                'data-item-key': itemKey
            }
        };
    }));
}

然后，在您的 select 处理程序中：

select: (e) => {
    console.log($(e.item).data('item-key'));
}

将附加数据添加到 Kendo UI 上下文菜单项

Adding additional data to Kendo UI Context Menu items

javascript

kendo-ui

kendo-contextmenu

angular

更新