This is a migrated thread and some comments may be shown as answers.

ContextMenu with Scheduler

2 Answers 290 Views

This is a migrated thread and some comments may be shown as answers.

Michael asked on 01 Dec 2014, 08:09 PM

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

ContextMenu with Scheduler

2 Answers, 1 is accepted