Destroy and Recreate Scheduler in MVC

[Paul Ridden]

Hi,

I've spent my whole day searching for a way of reloading a scheduler's resources and data from a javascript function. So far I've reduced my code to:

var scheduler = $("#MyScheduler").data("kendoScheduler");

scheduler.resources[0].dataSource.read();
scheduler.dataSource.read();

 

My code calls the correct methods against the controller and the new data is returned. However, the new resources are not displayed correctly. A very similar problem found here: https://www.telerik.com/forums/modifying-resources-datasource-dynamically.

As stated in the above post, "modifying the scheduler resources after it's initialization is not supported". It's also recommended that the scheduler should be destroyed and re-initialize. Nencho also provides a link to http://dojo.telerik.com/egoq which shows a jQuery method of doing so. 

can someone provide me with an MVC example of doing so?

I've got a horrible feeling that I need to call the action methods in the controller manually. There must be a better way...

Here's my RazorView set up of my .

@(Html.Kendo().Scheduler<AlternativeViewModel>()
    .Name("AlternativeScheduler")
    .Date(Model.TargetDate.GetValueOrDefault(DateTime.Today).Date)
    .StartTime(new DateTime(2015, 03, 31, 00, 00, 00))
    .EndTime(new DateTime(2015, 03, 31, 23, 59, 59))
    .Selectable(true)
    .MajorTick(1440)
    .MinorTickCount(1)
    .AllDaySlot(true)
    .CurrentTimeMarker(false)
    .Height(720)
    .EventTemplate(
        "<div style=text-align:center> " +
            "<p style='margin-top: 4px'>#= title #</p>" +
            "<p>" +
                "#= kendo.toString(ShiftStart, 'HH:mm') # - #= kendo.toString(ShiftEnd,'HH:mm') #" +
            "</p>" +
        "</div>")
    .Editable(editable =>
    {
        editable.TemplateId("SchedulerEditorAlt");
        editable.Destroy(false);
    })
    .Views(views =>
    {
        views.TimelineWeekView(timeline => timeline.EventHeight(80).Title("Week").Selected(true))
            .Footer(false)
            .ShowWorkHours(false)
            .DateHeaderTemplate("#=kendo.toString(date, 'ddd dd MMM')# ");
    })
    .Timezone(Model.TimeZone)
    .CurrentTimeMarker(c => c.UseLocalTimezone(false))
    .Group(group => group.Resources("ServiceName").Orientation(SchedulerGroupOrientation.Vertical))
    .Events(e =>
    {
        e.ResizeEnd("Roster.onResizeEndAlt");
        e.Edit("Roster.onEditEventAlt");
        e.Save("Roster.onSaveAlt");
        e.Cancel("Burger.onClose");
        e.DataBound("Burger.onAltDataBound");
        e.MoveEnd("Burger.onMoveEndAlt");
        e.Navigate("Burger.onAltNavigate");
        e.Change("Burger.onSchedulerChangeAlt");
    })

    .Resources(resource => resource
        .Add(m => m.ShiftPatternId)
        .Title("ServiceName")
        .Name("ServiceName")
        .Multiple(true)
        .DataTextField("ServiceName")
        .DataValueField("ShiftPatternId")
        .DataColorField("Color")
        .DataSource(source => source
            .Read(read => read
                .Action("GetServiceNames", "Scheduler").Type(HttpVerbs.Post)
                .Data("Burger.getSchedulerDataWithFormat")
            )
        )
    )

    .Resources(resource => resource
        .Add(m => m.Status)
        .Title("ShiftStatusId")
        .Name("Status")
        .DataTextField("WorkerName")
        .DataValueField("BurgerStatusId")
        .DataColorField("Color")
        .DataSource(source => source
            .Read(read => read
                .Action("GetShiftStatusResources", "Scheduler")
                .Data("Burger.getSchedulerDataWithoutDateCheck")
            )
        )
    )
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.XmlId);
            m.Field(f => f.ServiceName).DefaultValue("No title");
            m.Field(f => f.SuggestedUserName);
            m.Field(f => f.Status);

        })
        .Read(read => read
                .Action("AlternativeSchedulerRead", "Scheduler")
                .Data("Burger.getSchedulerDataWithoutDateCheck")
        )
        .ServerOperation(true)
     )
)

Thanks in advance,

Paul

[Paul Ridden]

What's interesting is that after my above javascript is executed, clicking the reload button on the displays my new resources and data correctly.

[Dimitar]

Hello Paul Ridden,

I am attaching an ASP.NET MVC solution where a similar scenario to the one described is demonstrated - dynamically refreshing the Scheduler's resources data source. With it, when a button is clicked, the resources end-point is called with a different parameter to return data that is then successfully bound to the widget. 

To achieve the desired result, the promise API is used to detect when the read request is finished so that the view can be refreshed:

@(Html.Kendo().Button()
    .Name("reload")
    .Content("Reload Resources")
    .Events(e => e.Click("onReloadResourcesClick"))
)

<script>
    function onReloadResourcesClick(e) {
        var scheduler = $("#scheduler").getKendoScheduler();

        scheduler.resources[0].dataSource.read({ format: 2}).then(
        function () {
            scheduler.view(scheduler.view().name);
        });
    }
</script>

Regards,
Dimitar
Progress Telerik

[Paul Ridden]

Hi Dimitar,

Works perfectly!

Many thanks,

Paul