I am trying to integrate the kendo ContextMenu with the Scheduler. I found an example, but would rather use your context menu instead (http://jsbin.com/uNuQIPI/1/edit?html,js,output). According to your docs, if I use a filter, then e.target should be the element found via the filter: "The current target of the ContextMenu - either the init target or the current element chosen through filter, if specified." For some reason though, e.target is always the body element. I don't know if that's because of the way I am appending the context menu to the body, or if it's something else. Below is the Typescript method I have that creates and sets up the context menu for my scheduler. It DOES show the context menu when I right-click a scheduler event, but the alert I threw in there always shows undefined, since e.target is not the actual element with the "k-event" css class (the block with an event in the scheduler). Any ideas?
private setupContextMenu() {
this._$contextMenu = $("<ul id='" + this._$scheduler.attr("id") + "-context-menu'></ul>").appendTo($("body"));
this._contextMenu = new kendo.ui.ContextMenu(this._$contextMenu[0], {
filter: '.k-event',
dataSource: [{text: "Edit", spriteCssClass: "fa fa-edit" }, { text: "Delete", spriteCssClass: "fa fa-trash" }]
});
this._contextMenu.bind("select", (e) => {
var dataSource = this._scheduler.dataSource;
var uid = $(e.target).attr("data-uid");
alert(uid);
if (e.item.textContent === "Edit") {
var dataItem = <kendo.data.SchedulerEvent>dataSource.getByUid(uid);
this._scheduler.editEvent(dataItem);
} else if (e.item.textContent === "Delete") {
var dataItem = <kendo.data.SchedulerEvent>dataSource.getByUid(uid);
this._scheduler.removeEvent(dataItem);
}
});
}