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

Question

"kendoContextMenu" is one of control from Telerik suit. I am trying to attach it with Kendo Scheduler control.

Below is the code to render scheduler and menu
Part of it taken from Kendo sample site

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

Here is Context Menu Initialization

$("#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" }]);
    }
});
});

The above code adds only ONE item in context menu and click event directly fires up. I would like to have multiple items in a context menu and each should have its own event so that I can use them as it clicked.

Below image shows right click behavior, where it shows only Block in a menu

I am trying to get menu as below- which has multiple items and have its own click events

I am trying like below by appending text but it's seems to be wrong way to do and it can not have separate click event.

  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" }]);
    }

Kindly help

Answer 1

I'm afraid you're appending it wrong. By concatenating "| Cancel" you're not adding a new item, but adding text to the existing one.

Try creating a new object and append it with append():

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

Then you check by the class inside the select event:

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