向 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

它没有记录，但ContextMenu实际上继承自Menu. 因此，所有选项Menu都可用。特别是，您可以attr向数据项添加对象，请参阅文档中的示例。

要完成您的示例：

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'));
}