Articles in this section
Category / Section

How to render Schedule through partial view in unobtrusive mode

2 mins read

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.

https://www.syncfusion.com/kb/4092/how-to-render-the-schedule-control-by-enabling-unobtrusivejavascriptenabled

 

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.

Home page with button

Figure1: Home page with button

 

Schedule after clicking the 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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied