Events Not Showing in Scheduler Nested in Window Widget

5 posts, 1 answers
  1. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 24 Feb 2016 Link to this post

    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: {
    49.                       agenda: "Scheduled Events"
    50.                    }
    51.                 },
    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");

  2. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 24 Feb 2016 Link to this post

    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. 
  3. Answer
    Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 26 Feb 2016 Link to this post

    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.

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 27 Feb 2016 in reply to Vladimir Iliev Link to this post

    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

  5. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 01 Mar 2016 Link to this post

    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. 

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top