Refresh Layout

17 Feb 20223 minutes to read

In Scheduler, we can able to refresh the layout manually without re-render the DOM element by using the refreshLayout public method. The following example code explains to know how to use the refreshLayout method.

CSHTML

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("Refresh Layout").Render()
</div>
<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
        .SelectedDate(new DateTime(2021, 10, 15))
        .Render()
    )
</div>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.refreshLayout();
    };
</script>

Data.cs

public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}
public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 1,
        Subject = "Conference",
        StartTime = new Date(2021, 10, 16, 10, 0),
        EndTime = new Date(2021, 10, 16, 12, 0),
        IsAllDay = false
    });
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new Date(2021, 10, 18, 10, 0),
        EndTime = new Date(2021, 10, 18, 12, 30),
        IsAllDay = false
    });
    return appData;
}
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
}