Events Not Showing in Scheduler Nested in Window Widget

[Matthew]

I have two schedulers. Both use an identical datasource and identical templates. They are almost identical with the exception that the second scheduler allows editing with the editable.template property set. The first scheduler is static and is created on page load (actually on view load with MVVM). It displays all events correctly. The second scheduler is created inside of a popup window. The second is instantiated via a function called on a click event that is bound via MVVM. I am able to create events from the second scheduler, but events found in the datasource (scheduler datasource) are not displaying in the second scheduler yet they are in the first static scheduler. Could this be a side affect of the window widget? We are using 2014Q3. Any ideas on why the data passed to the read event of the datasource is not updating the calendar? I've verified that the data is in the DS by listening for the dataBound event on the scheduler and that the data matches the DS's model schema. No exceptions are being thrown. I can drill down into the DS and see the events, they are just not showing up in the view. Below is the code:

01.openCalendar: function(e) {
02.     var windowWidth, scheduleWidth, win;
03.    if(isMobile) {
04.     windowWidth = "500px";
05.       scheduleWidth = 480;
06.      } else {
07.        windowWidth = "600px";
08.        scheduleWidth = 580;
09.      }
10.    win = $("#subscribers-calendar-window").kendoWindow({
11.        title: "Appointments",
12.        visible: false,
13.        width: windowWidth,
14.        height: "550px",
15.        resizable: false,
16.        modal: false,
17.        draggable: true,
18.        deactivate: function() {
19.         // Remove pre-existing scheduler elements from the window...
20.           $("#subscribers-calendar").find("div.k-floatwrap.k-header.k-scheduler-toolbar").first().remove();
21.           $("#subscribers-calendar").find("div.k-header.k-scheduler-footer").first().remove();
22.           $("#subscribers-calendar").find("table.k-scheduler-layout.k-scheduler-agendaview.k-scheduler-agenda").first().remove();
23.           $("#subscribers-calendar").find("table.k-scheduler-layout.k-scheduler-dayview").first().remove();
24.           $("#subscribers-calendar").find("table.k-scheduler-layout.k-scheduler-weekview").first().remove();
25.           $("#subscribers-calendar").find("table.k-scheduler-layout.k-scheduler-monthview").first().remove();
26.        },
27.        activate: function() {
28.           _.delay(function() {
29.             var dateString = moment().format("YYYY/MM/DD"),
30.              startDate = dateString + " 05:00",
31.              endDate = dateString + " 22:00",
32.              scheduler = $("#schedule-scheduling-subscribers-calendar").kendoScheduler({
33.                 dataSource: DataSourceManager.getAppointmentsDS(),
34.                 width:scheduleWidth,
35.                 allDaySlot: false,
36.                 startTime: new Date(startDate),
37.                 workDayStart: new Date(startDate),
38.                 endTime: new Date(endDate),
39.                 workDayEnd: new Date(endDate),
40.                 workWeekStart: 0,
41.                 workWeekEnd: 6,
42.                 editable: {
43.                  template: $("#appointment-edit-popup-template").html()
44.                 },
45.                 add: editOfAppointment,
46.                 change: editOfAppointment,
47.                 messages: {
48.                    views: {
49.                       agenda: "Scheduled Events"
50.                    }
51.                 },
52.                 views: [
53.                   {
54.                    type: "day",
55.                      allDaySlot: false,
56.                      eventTemplate: $("#schedule-module-day-item-event-template").html()
57.                   },
58.                   {
59.                      type: "week",
60.                      eventTemplate: $("#schedule-module-day-item-event-template").html()
61.                   },
62.                   {
63.                      type: "agenda",
64.                      eventTemplate: $("#schedule-module-appointment-item-event-template").html()
65.                   }
66.                 ]
67.              }).data("kendoScheduler");
68.           }, 250);
69.       }
70.    }).data("kendoWindow");
71.      win.center();
72.      win.open();
73.}

[Matthew]

Also, this is probably important. When I print the scheduler widget (the one in the window), the _data array is empty. However, the dataSource._data array contains the events. This tells me that it is not a presentation issue, but rather a binding issue of the data in the datasource to the _data array of the scheduler. I've tried just about every function on the widget (refresh, setDataSource, ect.) to see if I could get it to force a refresh and use the data in the DS. And again, if I print the actual DS from within the activate listener on the window, it prints correctly with the events. I also did not include, but I'm destroying the widget on window close, but that doesn't matter since the events are not displaying on the first load of the scheduler. Thanks again...Matt. 

[Vladimir Iliev]

Hi Matthew,

Could you please modify the following example in order to reproduce the issue where the Scheduler loaded inside the Kendo UI Window widget is not working as expected? This would help me pinpoint the exact reason for current behavior.

• http://dojo.telerik.com/UmexA/2

Regards,
Vladimir Iliev
Telerik

 

 

[Matthew]

Thanks Vladimir,

 

I think I've got it figured out. When I removed the change EH, it all came up. Not sure why, but in the first scheduler it did not affect it. But, in the one in the window, it was causing it to not load. I think I'm good now and I'll mark it as complete.

 

Thanks again...Matt

[Vladimir Iliev]

Hello Matthew,

It's possible that the change event is not available in the current scope - you can check that by debugging the application inside the "activate" event of the Window widget. 

Regards,
Vladimir Iliev
Telerik