如何在Kendo Scheduler的上下文菜单中添加多个项目？

Question

“ kendoContextMenu ”是来自Telerik套装的控件之一。我试图用Kendo Scheduler控件附加它。

以下是渲染调度程序和菜单的代码
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事件中的班级进行检查：

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