如何将多个项目添加到 Kendo 调度程序中的上下文菜单？

Question

"kendoContextMenu" 是 Telerik 套装的控制之一。我正在尝试使用 Kendo 调度程序控件附加它。

下面是渲染调度器和菜单的代码
Part of it taken from Kendo sample site

<div id="example">
   <div id="scheduler"></div>
   <ul id="contextMenu"></ul>
</div>

这是上下文菜单初始化

$("#contextMenu").kendoContextMenu({
    filter: ".k-event, .k-scheduler-table td",
    target: "#scheduler",

    select: function(e) {
        var target = $(e.target);

        if (target.hasClass("k-event")) {
          var occurrenceByUid = scheduler.occurrenceByUid(target.data("uid"));

        } else {
          var slot = scheduler.slotByElement(target);


        }
    },
    open: function(e) {
      var menu = e.sender;
      var text = $(e.target).hasClass("k-event") ? "Edit  Title" : "Block";

      menu.remove(".myClass");
      menu.append([{text: text, cssClass: "myClass" }]);
    }
});
});

上面的代码只在上下文菜单中添加了一项，点击事件直接触发。我想在上下文菜单中有多个项目，每个项目都应该有自己的事件，以便我可以在单击时使用它们。

下图显示了右键单击行为，它在菜单中仅显示阻止

我正在尝试获取如下菜单 - 它有多个项目并有自己的点击事件

我正在尝试像下面那样附加文本，但这似乎是错误的做法，而且它不能有单独的点击事件。

  open: function(e) {
      var menu = e.sender;
      var text = $(e.target).hasClass("k-event") ? "Edit event" : "Add Event";
                text = text + "|" + "Cancel"
      menu.remove(".myClass");
      menu.append([{text: text, cssClass: "myClass" }]);
    }

请帮忙

Answer 1

恐怕你附加错了。通过连接 "| Cancel"，您并不是在添加新项目，而是在现有项目中添加文本。

尝试创建一个新对象并附加 append():

menu.append([{text: "Cancel", cssClass: "cancel-opt" }]);

然后通过 select 事件中的 class 检查：

if (target.hasClass("cancel-opt"))

如何将多个项目添加到 Kendo 调度程序中的上下文菜单？

How to add multiple items to context menu in Kendo Scheduler?

javascript

contextmenu

kendo-ui

kendo-scheduler