How to bind the data to the schedule control through the Ajax call?
In general, the Schedule control supports Data binding in many ways. One such way is to bind it through the Ajax call by using MVC application.
Step 1: Add the Schedule code in the View page of the MVC application to render it as follows.
Index.cshtml
<div> <div id="ScheduleDiv"> <div style="float: left" id="Schedule1"> </div> </div> </div>
JavaScript
$(function () {
$("#Schedule1").ejSchedule({
currentDate: new Date(2014, 6, 2),
appointmentSettings: {
id: "Id",
subject: "Subject",
location: "Location",
description: "Description",
startTime: "StartTime",
endTime: "EndTime",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
}
});
});
Step 2: Define a HTML button in the same view page as shown, to trigger the Ajax call on clicking it.
Index.cshtml
<div> <div> <input type="button" value="Click to bind the data" id="BindData" /> </div> </div>
Step 3: Define the JsonResult action method, for example GetData, in the Controller page in order to read the appointment details from the database.
Controller
public JsonResult GetData()
{
IEnumerable data = new ScheduleDataDataContext().DefaultSchedules.Take(500); // select 500 records from table
return Json(data, JsonRequestBehavior.AllowGet);
}
Step 4: Now, call the above defined action method (GetData) via Ajax call from the View page by clicking the button as mentioned in the following code.
Index.cshtml
// Executes when the button is clicked.
$("#BindData").click(function () {
$.ajax({
url: "/Schedule/GetData", success: function (result) {
var object = [];
// Stores the result values to the object collection.
for (var i = 0; i < result.length; i++) {
object[i] = {
Id: result[i].Id,
Subject: result[i].Subject,
StartTime: new Date(result[i].StartTime.match(/\d+/)[0] * 1),
EndTime: new Date(result[i].EndTime.match(/\d+/)[0] * 1),
Description: result[i].Description,
AllDay: result[i].AllDay,
Recurrence: result[i].Recurrence,
RecurrenceRule: result[i].RecurrenceRule
}
}
$("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", object); // Assigns the DataSource to the Schedule control.
},
});
});
Step 5: Run the sample now and initially the Schedule control renders without any appointments. After clicking the button, the successful Ajax post retrieves the appointment collection and renders it to the control.
Figure 1: Schedule display at page load
Figure 2: After clicking the button
Sample Link:
