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.

@using Syncfusion.EJ2.Schedule

<div>
    <ejs-button id="btn1" content="Refresh Layout"></ejs-button>
</div>
<div>
    <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2021, 10, 15)">
        <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
    </ejs-schedule>
</div>

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