How to Refresh scheduler after success the save

[CW]

How to  Refresh scheduler after success the save. i need to refresh the scheduler after success the save.
i used save handler to call the data source read. but it will call before save the data in data base.

[Rosen]

Hello CW,

Although, the scheduler will automatically update its UI after a CUD operation you may manually force an DataSource re-population by calling its read method from within the sync event.

Regards,
Rosen
Telerik

[CW]

hi Rosen,

thanks for the reply.
can u please give me a further explain. haw can i call the sync. i tried to add this property but couldn't find only have AutoSync.
its really appreciate if u could explain me  with a sample. thanks.     

[Rosen]

Hi CW,

The mentioned events are DataSource events not Scheduler's. Here is a snippet of how the suggested code should look like:

$("#scheduler").kendoScheduler({
  timezone: "Etc/UTC",
  dataSource: {
    sync: function() {
      this.read();
    },
    transport: {
      //..
    },
    schema: {
       //...
    }
  }
});

Regards,
Rosen
Telerik

[Chase]

Is there a way to do this using the MVC wrapper?

[Rosen]

Hi Chase,

Yes it is possible. You should use the Sync wrapper method to attach the event.

Regards,
Rosen
Telerik

 

 

[Attila]

Telerik and co. 

Please make more documentation for the ASP.net MVC version of the scheduler. And please stop posting replies that refer to the jQuery UI version, because they are not the same, dont support the same functions and the syntax is very different. SO NO, the reply above this post "sync wrapper method" link, is useless because its a jQuery UI method. 

If you want to redeem this extremely bad customer service, you will answer the below question written in bold, with a code example that works in MVC specifically. 

Given the following code, how would I refresh / reload the scheduler (call read or whatever), in order to reload the scheduler, so it shows the changes after an appointment has been saved.

Scenario:

I double click and existing appointment, the popup for editing comes up, I do my changes, press save. By default, if you changed any of the usual stuff like Name, description, start / end time or recurrence, the scheduler will update the view automatically. But in my case the only thing my users are allowed to change are custom properties, that have a huge impact on where the events are placed in the scheduler. So to see the changes i currently need to press F5 on my keyboard, so the scheduler loads the data again, and woopti the changes have taken effect. Problem is, the end users cannot be asked to press F5 on the keyboard whenever they want to see a change, they expect it to work automatically. Therefore I must automate the refresh process by somehow calling the Read method after the save has finished.

I believe that the following code snippet gets me the correct place to put the functionality i seek, but I cannot figure out how to call Read or some other reload method on the Scheduler. Ofc i could always use JS built in window.location.reload(true); but if its possible i would rather not need to do it so roughly.

@(Html.Kendo().Scheduler<WebStaffScreen.Models.TaskViewModel>()
	.Name("booking_Scheduler")
	.DateHeaderTemplate("<span class='k-link k-nav-day'>#= kendo.toString(date, 'dd-MM-yyyy') #</span>")
	.Date(DateTime.Now)
	.CurrentTimeMarker(false)
	.AllDaySlot(true)
	.MajorTick(1440)
	.EventTemplate("<div style='background-color:#= AppointmentColor #; line-height: 1.5; height: 100%;'><p>#= title #</p></div>")//color:#= fontColor #;
	.Views(v => { v.TimelineWeekView(x => x.Selected(true)); })
	.Timezone("Europe/Copenhagen")
	.Editable(x => {
		x.TemplateName("BookingEditorPartialView").Create(false).Destroy(false).Resize(false).Confirmation(false).Move(false);
		x.EditRecurringMode(SchedulerEditRecurringMode.Series);
	})
	.Group(g => g.Resources("Rooms").Orientation(SchedulerGroupOrientation.Vertical))
	.Resources(r => r.Add(m => m.RoomID)
		.Title("Room")
		.Name("Rooms")
		.DataTextField("RoomName")
		.DataValueField("RoomID")
		.DataColorField("AppointmentColor")
		.BindTo(Model)
		.DataSource(d => { d.Custom().Transport(t => t.Read(x => x.Action("GetRoomsInResidence", "Booking"))).Schema(s => s.Model(m => { m.Id("RoomID"); m.Field("RoomName", typeof(string)); })); })
	)
	.DataSource(d => d.Model(m => { m.Id(f => f.TaskID); })
		.Read("Read", "Booking")
		.Update("Update", "Booking")
		.Events(x => x.Sync("booking_Dialog_sync")) // <----------------------------- this line
	)
	.Events(x => {
		x.Edit("booking_Dialog_Edit");
		x.DataBinding("hideTimelineTimeHeader");
	})
)

Can you please help me figure out how to reload this scheduler? what would you write in the JS method that matches the marked line, to achieve the desired behavior?

[Yanislav]

Hello, Attila

Let me address your comment about linking to Kendo jQuery. The reason behind this is that the UI for ASP.NET MVC components are wrappers for the Kendo widgets. There can be occasions where jQuery code is needed to achieve a specific requirement.

To reach the same result like the one mentioned above, within the declared handler " booking_Dialog_sync " you should execute a similar logic to the following one : 

 

   function booking_Dialog_sync(e) {
        var schedulerDataSource = e.sender;
        schedulerDataSource.read();
    }

 

By using the "sender" property of the sync event, you can refer to the data source of the Scheduler. After that by using the .read() method you can force the data source to fetch the data again.

I hope this helps!