Добавление дополнительных данных в пункты контекстного меню Kendo UI

Я хочу использовать контекстное меню Kendo UI в моем приложении. Я ожидал стандартного поведения отображения текста в самом меню, но другое значение (идентификатор или ключ) возвращается в select обработчик события.

Например, меню отображает список имен, но когда я нажимаю на одно из них, я получаю идентификатор, связанный с именем.

Я пытался добавить дополнительные свойства, кроме text к массиву элементов в контекстном меню, но я не вижу их в объекте события в обработчике.

Я не могу использовать текст, чтобы найти соответствующий идентификатор, который соответствует ему, так как могут быть записи с одинаковым текстом, но разными идентификаторами.

Есть идеи?


Редактировать:

В настоящее время я строю контекстное меню так:

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, который, будучи незначительным, не идеален...

Источник

2 ответа

Решение

Это без документов, но 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'));
}
Источник

Вариант 1) Вы можете добавить данные, которые будут указывать ваш идентификатор. Я сделал это с помощью оболочки MVC, но это может быть сделано и с чистым 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>
Источник
Другие вопросы по тегам