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; }
}