Call Scheduler navigate method

[Kevork]

Hi,

 

I need to call scheduler's navigate function when I click Search button. How can I do that?

I wrote the following code for refreshing the scheduler but it sometimes works and sometimes not.

$("#gridJobAllocation").data("kendoGrid").dataSource.read();

 

 Thanks.

[Vladimir Iliev]

Hi Kevork,

Could you please elaborate more on why do you need to trigger the "navigate" event? If you are trying to implement server filtering you can use the approach shown in the following demo:

• Scheduler: Server filtering without using the navigate event

Regards,
Vladimir Iliev
Telerik

[Kevork]

I need to show dynamic start and end time for 7 days a week. When the scheduler normally loads with the page, it doesn't show the dynamic start and end time. But when I choose date from the scheduler calendar, it works. That's why I need to call the  "schedulerJob_navigate" function on page loading event.

 

function schedulerJob_navigate(e) {
    var startHour;
    var endHour;

    var companyInfo = @Html.Raw(Json.Encode(HttpContext.Current.Session["Level4CompanyObject"]));

    if(e.date.getDay() == 0){
        startHour = companyInfo.sys_start_time1;
        endHour = companyInfo.sys_end_time1;
    }
    else if(e.date.getDay() == 1){
        startHour = companyInfo.sys_start_time2;
        endHour = companyInfo.sys_end_time2;
    }
    else if(e.date.getDay() == 2){
        startHour = companyInfo.sys_start_time3;
        endHour = companyInfo.sys_end_time3;
    }
    else if(e.date.getDay() == 3){
        startHour = companyInfo.sys_start_time4;
        endHour = companyInfo.sys_end_time4;
    }
    else if(e.date.getDay() == 4){
        startHour = companyInfo.sys_start_time5;
        endHour = companyInfo.sys_end_time5;
    }
    else if(e.date.getDay() == 5){
        startHour = companyInfo.sys_start_time6;
        endHour = companyInfo.sys_end_time6;
    }
    else if(e.date.getDay() == 6){
        startHour = companyInfo.sys_start_time7;
        endHour = companyInfo.sys_end_time7;
    }

    $("#schedulerJob").data("kendoScheduler").options.workDayStart = startHour;
    $("#schedulerJob").data("kendoScheduler").options.workDayEnd = endHour;
}

 

@(Html.Kendo().Scheduler<TaskViewModel>()
    .Name("schedulerJob")
    .Date(DateTime.Today)
    .StartTime(0, 0, 0)
    .WorkDayStart(7, 0, 0)
    .WorkDayEnd(18, 0, 0)
    .Height(690)
    .EventTemplate("#if(ScheduleType == 'Reservation') {#" +
                    "<div class='reservationClass' style='float: left;'>" +
                        "<img src='calendar-icon-15.png' style='width:22px;' />" +
                        "#= ReservedBy # - #= title #" +
                    "</div>" +
                    "<div class='reservationClass' style='clear: both; float: left; padding-left: 22px;'>" +
                        "Reserved" +
                    "</div>" +
                    "#}" +
                    "else {#" +
                    "<div class='#= JobStatus #' scheduled='#= IsScheduled #' quote='#= IsQuote #' style='float: left; background-color: #= JobStatusColour # '>" +
                        "<img src='User-Group-Home.png' style='width:22px;' />" +
                            "#= title #" +
                    "</div>" +
                    "<div class='jobClass' style='clear: both; float: left; padding-left: 22px;'>" +
                        "#= description #" +
                    "</div>" +
                    "#}#")
    .Views(views =>
    {
        views.TimelineView(v => v.Selected(true));
    })
    .Events(e =>
    {
        e.Edit("schedulerJob_edit");
        e.Navigate("schedulerJob_navigate");
        e.Remove("schedulerJob_remove");
        e.Save("schedulerJob_save");
        e.DataBinding("schedulerJob_dataBinding");
        e.DataBound("schedulerJob_dataBound");
        e.MoveEnd("schedulerJob_moveend");
        e.ResizeEnd("schedulerJob_resizeend");
    })
    .Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(resource =>
    {
        resource.Add(m => m.TechName)
            .Title("Techs")
            .Name("Techs")
            .DataTextField("TechName")
            .DataValueField("emm_code")
            .DataColorField("Color")
            .DataSource(d => d.Read("Techs", "JOBS"));
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(r => r.emm_code);
        })
        .ServerOperation(true)
        .Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
        .Create("JobSchedule_Create", "JOBS")
        .Update("JobSchedule_Update", "JOBS")
        .Destroy("JobSchedule_Delete", "JOBS")
    )
    .Editable(e =>
    {
        e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));
    })
)

 

 

Thanks

[Vladimir Iliev]

Hello Kevork,

In current scenario you can execute the same code on the Scheduler only once, after it's initialization and reload the view as demonstrated below:

//execute only once after the scheduler initialization
$(function() {
  var scheduler = $("#scheduler").data("kendoScheduler");
  var view = scheduler.view();
  var date = scheduler.date();
  var startHour;
  var endHour;

  if (date.getDay() == 4) {
    startHour = companyInfo.sys_start_time4;
    endHour = companyInfo.sys_end_time4;
  }

  scheduler.options.workDayStart  = startHour;
  scheduler.options.workDayEnd = endHour;

  //refresh the view in order the changes to take effect
  scheduler.view(scheduler.view().name);
});

Regards,
Vladimir Iliev
Telerik