How to open scheduler editor window on timerange selection?

[Oliver]

Hi!

I'd like to open the event-editor popup automatically when a timerange has been selected (without pressing ENTER). How do I trigger opening the window? 

Here is the change listener I've implemented so far:


var changeTimer;
    var changeInterval = 1000;
    var selectedStart;
    var selectedEnd;
    function scheduler_change(e) {
        if (e.events.length == 0 && e.start < e.end) {
            selectedStart = e.start;
            selectedEnd = e.end;
            if (changeTimer) {
                clearTimeout(changeTimer);
            }
            changeTimer = setTimeout(openWindow, changeInterval);
        }
   }

 function openWindow() {
        if (selectedStart && selectedEnd) {
            var scheduler = $("#scheduler").data("kendoScheduler");
            //open editor here
        }
    }

My Scheduler:

@(Html.Kendo().Scheduler<SchedulerEvent>()
          .Name("scheduler")
          .Date(DateTime.Today)
          .Editable(edit => edit.TemplateName("SchedulerEventEditor"))
          .EventTemplateId("template")
          .DateHeaderTemplate(string.Format("<strong>#=kendo.toString(date, '{0}')#</strong>", GlobalResources.SchedulerHeaderDateFormat))
          .Resources(resource => resource.Add(m => m.CalendarId)
                                         .Title(GlobalResources.CalendarOwner)
                                         .DataTextField("OwnerName")
                                         .DataValueField("CalendarId")
                                         .DataColorField("Color")
                                         .BindTo(Model.Calendars.Where(x => !x.IsReadOnly))
          )

          .Views(views =>
              {
                  views.DayView();
                  views.WeekView();
                  views.MonthView();
                  views.AgendaView();
              })
          .Selectable(true)
          .Events(evts =>
              {
                  evts.Change("scheduler_change");
                  evts.Edit("scheduler_edit");
                  evts.DataBound("scheduler_dataBound");
                  evts.ResizeEnd("scheduler_resize");
                  evts.MoveEnd("scheduler_move");
                  evts.Remove("scheduler_remove");
                  evts.Add("scheduler_add");
              })
          .DataSource(dataSource => dataSource
              .ServerOperation(true)
                                        .Model(
                                            m =>
                                            {
                                                m.Id(f => f.ID);
                                                //m.RecurrenceId(f => f.RecurrenceID.Value);
                                                m.Field(f => f.ConfirmationRequired).DefaultValue(true);
                                                m.Field(f => f.PointOfInterest).DefaultValue(new PointOfInterest());
                                                m.Field(f => f.Attendees).DefaultValue(new List<Guid>());
                                                m.Field(f => f.CalendarId).DefaultValue(Model.Calendars.Where(x=>x.IsOwner).Select(x => x.CalendarId).FirstOrDefault());
                                            }
                                        )
                                        
                                        .Events(e => e.Sync("function() {this.read();}"))
                                        .Read( read=>read.Action("ReadEvents", "Scheduler").Data("readData"))
                                        .Create("CreateEvent", "Scheduler")
                                        .Destroy("DeleteEvent", "Scheduler")
                                        .Update("UpdateEvent", "Scheduler")            
          )
          )

Best regards

[Vladimir Iliev]

Hi Oliver,

From the provided information it seems that you need assistance with the opening of the popUp editor with the currently selected "start" and "end" dates - if this is the case you can achieve the desired behavior by extending the "openWindow" function as follows:

function openWindow() {
       if (selectedStart && selectedEnd) {
           var scheduler = $("#scheduler").data("kendoScheduler");
           scheduler.addEvent({start: selectedStart, end: selectedEnd});
       }
   }

Regards,
Vladimir Iliev
Telerik

[Oliver]

Works fine! Thanks.