My Mvc Scheduler fires the create method from controller multiple times

[Attila]

Hi..

I am experiencing that when i create an event via the popup on scheduler, and save, a debug breakpoint placed in the Create method of the controller, can be observed to fire between 2 and 4 times. i checked the database and it indeed runs the whole save process 2 or 4 times with the same data.

My view has the following code:

<div id="citizenAppointmentCalender" class="calenderContainer">
	@(Html.Kendo().Scheduler<AppointmentTaskViewModel>()
		.Name("appointmentsCalender")
		.Height(820)
		.Editable(e => {
			e.TemplateName("CitizenAppointmentsEditorPartialView");
			e.EditRecurringMode(SchedulerEditRecurringMode.Series);
		})
		.DateHeaderTemplate("<strong>#=kendo.toString(date, 'ddd dd-MMM')#</strong>")
		.AllDaySlot(false)
		.Timezone("Europe/Copenhagen")
		.EventTemplate("<div class='eventBox' style='background-color:#= BackColor #; color:#= FontColor #;'><div class='eventInner'><span>#= title #</span></div><div class='eventInner'><span>#= description #</span></div></div>")
		.Views(views => {
			views.DayView();
			views.WeekView(x => x.Selected(true));
			views.MonthView();
		})
		.Events(x => {
			x.Edit("caed_Dialog_Edit");
			x.Save("caed_Dialog_Save");
		})
		.DataSource(d => {
			d.Model(m => { m.Id(f => f.ID); });
			d.Read(read => read.Action("Read", "CitizenDashboard").Type(HttpVerbs.Post));
			d.Create("Create", "CitizenDashboard");
			d.Destroy("Destroy", "CitizenDashboard");
			d.Update("Update", "CitizenDashboard");
		})
	)
</div>

 

The controller code:

public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request, AppointmentTaskViewModel task) {
    if (ModelState.IsValid) {
	appointmentService.Insert(task, ModelState);
    }

    return Json(new[] { task }.ToDataSourceResult(request, ModelState));
}

 

Finally the javascript for the "edit" and "save" events:

function caed_Dialog_Edit(e) {
	$("#caed_eventType_private")[0].checked = false;
	$("#caed_eventType_medical")[0].checked = false;
	$("#caed_eventTypes_PrivateBox")[0].classList.add("hide");
	if (e.event.Type == 3) {
		$("#caed_eventType_private")[0].checked = true;
		$("#caed_eventTypes_PrivateBox")[0].classList.remove("hide");
	} else if (e.event.Type == 2) {
		$("#caed_eventType_medical")[0].checked = true;
	}
	var buttons = e.container[0].children[0].children[1];
	if (e.event.IsNexusAppointment) {
		$("#caed_Title")[0].setAttribute("disabled", "disabled");
		$("#caed_Description")[0].setAttribute("disabled", "disabled");
		$("#caed_startDate").data("kendoDateTimePicker").enable(false);
		$("#caed_endDate").data("kendoDateTimePicker").enable(false);
		$("#caed_eventType_medical")[0].setAttribute("disabled", "disabled");
		$("#caed_eventType_private")[0].setAttribute("disabled", "disabled");
		$("#caed_isPersonal")[0].setAttribute("disabled", "disabled");
		$("#caed_recurrence").data("kendoRecurrenceEditor").element[0].disabled = true;

		buttons.children[0].classList.add("hide"); // Save btn
		buttons.children[1].innerText = "OK";
		if (buttons.children.length >= 3)
			buttons.children[2].classList.add("hide"); // Delete btn

	} else {
		$("#caed_Title")[0].removeAttribute("disabled");
		$("#caed_Description")[0].removeAttribute("disabled");
		$("#caed_startDate").data("kendoDateTimePicker").enable(true);
		$("#caed_endDate").data("kendoDateTimePicker").enable(true);
		$("#caed_eventType_medical")[0].removeAttribute("disabled");
		$("#caed_eventType_private")[0].removeAttribute("disabled");
		$("#caed_isPersonal")[0].removeAttribute("disabled");
		$("#caed_recurrence").data("kendoRecurrenceEditor").element[0].disabled = false;

		buttons.children[0].classList.remove("hide"); // Save btn
		buttons.children[1].innerText = "Fortryd";
		if (buttons.children.length >= 3)
			buttons.children[2].classList.remove("hide"); // Delete btn
	}
}
function caed_Dialog_Save(e) {
	if (e.event.caed_eventType_radio)
		e.event.Type = parseInt(e.event.caed_eventType_radio);

	if (e.event.Type == 3) {
		e.event.IsPersonal = e.event.caed_isPersonal ? e.event.caed_isPersonal : false;
		e.event.BackColor = "#ffa500";
		e.event.FontColor = "#fff";

	} else if (e.event.Type == 2) {
		e.event.BackColor = "#F02222";
		e.event.FontColor = "#fff";
	}

	var scheduler = $("#appointmentsCalender").data("kendoScheduler");
	scheduler.dataSource.sync();
}

 

With these 3 snippets of code.. you can duplicate the issue. No need for a sample project. The "Insert" method simply puts the data from the model into an entity framework object and saveChanges is called, nothing more. But by then its already reproducible. 

So just make a new event and press save. Remember to put a breakpoint at the start of the create method.

 

HOW can i prevent this from happening?

[Yanislav]

Hello Attila,

Unfortunately, I wasn't able to replicate the pointed behavior, since only by applying the snippets you've shared I received multiple JavaScript exceptions. However, I tried to replicate the pointed behavior and in my opinion, the following configuration is causing the sending of multiple requests : 

var scheduler = $("#appointmentsCalender").data("kendoScheduler");
scheduler.dataSource.sync();

Since the sync method will request the remote service if the data source contains new or updated data items, this way when the button for saving is clicked, 2 different requests are sent. Since I wasn't able to replicate the exact behavior, I can only guess if this is the exact reason for such broken behavior. That's why I prepared a sample runnable project so you can see in detail how the CRUD operations for Scheduler are implemented. I hope it will help you to find and resolve the issue. If not, may I ask you to try reproducing the problem in the project and send it back to me so I can investigate it and come up with a more concrete solution? 

Regards,
Yanislav
Progress Telerik

[Attila]

I tried removing the .sync() call. It helps with the duplicate call, UNLESS you press the save button many times before the window finally closes. I've seen another questions on the forum about this issue. 

I ended up making a datetime comparison function in the controller, so when the first request calls the create method, it does its work, and after that the rest of the request are ignored for 3 seconds.. Takes the average user more than 10 seconds to make a new event, so it will work regardless of other issues from the scheduler's side.