This is a migrated thread and some comments may be shown as answers.

How to Refresh scheduler after success the save

5 Answers 846 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
CW
Top achievements
Rank 1
CW asked on 15 Aug 2013, 07:00 AM
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.

5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 15 Aug 2013, 12:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
CW
Top achievements
Rank 1
answered on 16 Aug 2013, 09:43 AM
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.     
0
Accepted
Rosen
Telerik team
answered on 19 Aug 2013, 07:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chase
Top achievements
Rank 1
answered on 07 Apr 2015, 09:23 AM
Is there a way to do this using the MVC wrapper?
0
Rosen
Telerik team
answered on 08 Apr 2015, 07:18 AM
Hi Chase,

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

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Attila
Top achievements
Rank 1
Iron
Iron
commented on 21 Feb 2022, 01:40 PM

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
Telerik team
commented on 23 Feb 2022, 02:24 PM

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!

 

Tags
Scheduler
Asked by
CW
Top achievements
Rank 1
Answers by
Rosen
Telerik team
CW
Top achievements
Rank 1
Chase
Top achievements
Rank 1
Share this question
or