Kendo contextMenu функция выбора для определенных элементов

Question

Я пытаюсь создать contextMenu, используя виджет kendoContextMenu. Это работает с использованием следующего кода.

$("#contextMenu").kendoContextMenu({
target: "#tree",
filter: ".k-item",
select: function(e) {
    alert("Selected");
},
dataSource:
[
    { text: "Item1"},
    {
        text: "SubMenu1",
        items: [
            { text: "Item1" }
        ]
    },
    {
        text: "SubMenu2",
        items: [
            { text: "Item1" }
        ]
    }
]
});

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

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

Answer 1

Kendo ContextMenu не имеет этой функции, но у вас есть 2 варианта:

Сначала настройте контекстное меню, используя HTML с onclick События:

<ul id="menu">
    <li>
        Option 1
        <ul>
            <li onclick="alert('test');">Sub option 1</li>
            <li>Sub option 2</li>
        </ul>
    </li>
    <li>Option 2</li>
</ul>
<script>
    $(document).ready(function() {        
        $("#menu").kendoContextMenu({
                orientation: orientation,
            });
        };
    });
</script>

Во-вторых, если вы можете гарантировать уникальность имени, вы можете добавить свойства клика в dataSource конфигурации, а затем в контекстном меню выберите событие, которое вы можете найти в dataSource соответствующий пункт и выполнить прикрепленную функцию вручную.

Answer 2

Другой способ - добавить функцию выбора и переключить регистр, это случай, когда у вас есть древовидная структура:

$("#menu").kendoContextMenu({
            select: function (e) {
                var button = $(e.item);
                var node = $(e.target);
                var tmpKendDiagram = $(".diagram").data("kendoDiagram");

                var tv = $(".tree-view").data("kendoTreeView");
                var item = tv.dataItem(node);
                var textSelect = $(e.item).children(".k-link").text();
                switch (textSelect) {
                    case '1option':
                        //do stuff
                        break;
                    case '2option':
                        //do stuf
                        break;
                    default:
                        break;
                }

            }
        });

Answer 3

Я знаю, что это устарело, но я реализовал это так

$("#context-menu").kendoContextMenu({
  target: "#target",
  select: function(e) {
    let index = $(e.item).index();
    e.sender.options.dataSource[index].click(e);
  },
  dataSource: [
    {text: "Copy",
      click: function(e) {
        console.log("copied");
      }
    },
    {text: "Delete",
      click: function(e) {
        console.log("deleted");
      }
    }
  ]
});

<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>

<div id="target">Target</div>
<div id="context-menu"></div>