Destroy and Recreate Scheduler in MVC

4 posts, 1 answers
  1. Paul Ridden
    Paul Ridden avatar
    49 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2018 Link to this post

    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. 

    Please 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 scheduler.

    @(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

  2. Paul Ridden
    Paul Ridden avatar
    49 posts
    Member since:
    Mar 2007

    Posted 14 Dec 2018 in reply to Paul Ridden Link to this post

    What's interesting is that after my above javascript is executed, clicking the reload button on the scheduler displays my new resources and data correctly.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    669 posts

    Posted 17 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

  4. Paul Ridden
    Paul Ridden avatar
    49 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2018 Link to this post

    Hi Dimitar,

    Works perfectly!

    Many thanks,

    Paul

Back to Top