How to render Schedule through partial view in unobtrusive mode
The following steps depicts the way to render Scheduler through partial view in unobtrusive mode.
Step1: Create the default Schedule sample in unobtrusive mode by referring the below link.
Step2: In the index page, render a button control and define its corresponding click function as shown below. Within the click function, make an ajax call to the action in a Home controller namely “Schedule”.
<button class="schedulebutton">Click to render Schedule</button>
<div id="PartialViewSchedule"></div>
<script type="text/javascript"> $(function () { $(".schedulebutton").click(function (e) { //function will be called when the button is clicked $.ajax({ url: "/Home/Schedule", type: 'POST', success: function (data) { if (!ej.isNullOrUndefined($("#Schedule1").ejSchedule("instance"))) $("#Schedule1").ejSchedule('destroy'); var d = $("#PartialViewSchedule"); d.html(data); ej.widget.init($("#PartialViewSchedule")); } }); }); }); </script> |
Step3: Define the Home controller function Schedule which assigns the dataSource of Scheduler to ViewBag as well as returns the partial view as shown below.
public ActionResult Schedule() { List<ScheduleData> Appoint = new List<ScheduleData>(); Appoint.Add(new ScheduleData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2017, 04, 20, 10, 00, 00), EndTime = new DateTime(2017, 04, 20, 11, 00, 00), Description = "Just a test...", IsAllDay = false, Recurrence = false, RecurrenceRule = "" }); ViewBag.dataSource = Appoint; return PartialView("_schedule");} public class ScheduleData { public int Id { get; set; } public string Subject { get; set; } public string Description { get; set; } public DateTime StartTime { get; set; } public DateTime EndTime { get; set; } public bool IsAllDay { get; set; } public bool Recurrence { get; set; } public string RecurrenceRule { get; set; } } |
Step4: Define the partial view index page _schedule (will be under Shared folder) as shown below.
@(Html.EJ().Schedule("Schedule1") .Width("100%") .Height("525px") .CurrentDate(new DateTime(2017, 4, 20)) .AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource) .Id("Id") .Subject("Subject") .StartTime("StartTime") .EndTime("EndTime") .AllDay("IsAllDay") .Recurrence("Recurrence") .RecurrenceRule("RecurrenceRule")) ) |
Step5: Run the sample and click the button, Schedule will be rendered through partial view as shown below.
Figure1: Home page with button
Figure2: Schedule after clicking the button
Partial View in Unobtrusive mode:
https://www.syncfusion.com/downloads/support/directtrac/179247/ze/Sample-1319267212
Partial View without Unobtrusive mode:
https://www.syncfusion.com/downloads/support/directtrac/179247/ze/PartialView1110044226