Kendo UI scheduler doesn't allow for reliable cell click event handling

Question

The docs say the scheduler change event is "Fired when the user selects a cell or event in the scheduler."

Great. The problem is that event is also fired on browser window resize. My app now thinks when the browser window is resized that the user clicked in a cell.

How do I distinguish between these two conditions?

Are you sure? Playing with it in the kendo dojo, I can't replicate your problem. Are you able to recreate the issue in jsbin or something where we can touch it? — snow_FFFFFF
Kendo by default should not trigger a change event on your schedule on window resize. — Pat
Complex app. Only thing I could do is provide a private link? Is there a way to do that through stack overflow? — Robert

Robert Robert · Accepted Answer · 2016-08-19T01:58:25

Thought I had the answer here but no dice. No idea what causes the scheduler to fire the change event on resizing. I am showing it in a Marionette JS view. Maybe that has something to do with it? Not sure. It shouldn't.

I know it's all wired correctly because the calendar works properly when clicked - correct views are displayed based on whether a calendar slot has an event or is blank. But the change event fires when on window resize causing my app to fire view changes. A break point in the scheduler change event confirms it is firing on window resize.

Below I tried ditching the change event in favor onClick based on some prescriptions found in various posts. Ugly code but it worked in Chrome. Unfortunately doesn't work in other browsers. Why is there simply no "onClick" event? I just looked at a competing scheduler product and it has one.

Chrome only solution: "e" below is the onClick event object:

    //Get the element ID - the DOM ID of the thing that was clicked.  You'll use it to 
    //dip into the scheduler data model to get the event specific data you're after.

    var uid = e.toElement.parentElement.parentElement.attributes[2].nodeValue;

    //Get a reference to the scheduler data model
    var scheduler = $("#scheduler").data('kendoScheduler');


    //Use the uid to find the event associated with the click action
    var event = scheduler.occurrenceByUid(uid);

Here are the posts that helped formulate that Chrome solution:

Call Scheduler events from EventTemplate

Kendo UI scheduler doesn't allow for reliable cell click event handling

Problem with this obviously is that it doesn't work in other browsers. That uid value (e.toElement.parentElement.parentElement.attributes2.nodeValue) is in different places in different browsers. So this solution is a no go.

I have no idea how a product like this doesn't have an onClick event. Likely have to use a different calendar. Very frustrating.

The issue at hand is I am rendering this calendar in a Marionette js item view. when a scheduler cell item is clicked I take the user to a different view. But the event that is used by the scheduler to handle clicks, "change", also fires on browser window resize. So on a browser window resize my app takes the user to a different view. Not good. No work around.

Kendo UI scheduler doesn't allow for reliable cell click event handling

1 Answers