We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the data to the schedule control through the Ajax call?

Platform: JavaScript |
Control: ejSchedule |
Published Date: November 19, 2014 |
Last Revised Date: May 28, 2019

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.

 

Schedule display at page load

Figure 1: Schedule display at page load

After clicking the button

Figure 2: After clicking the button 

Sample Link:

AjaxDataBinding

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon