New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Adaptive Rendering
Updated on Jun 20, 2025
The Scheduler provides adaptive enhancements that adjust its styling and behavior to suit the viewing device.
For example, when editing on a mobile device, the edit container slides in on full screen instead of appearing as a popup—providing a more mobile-friendly experience.
To enable the adaptive rendering feature, set the Mobile property to MobileMode.Auto or MobileMode.Phone:
- If set to
MobileMode.Auto, the component uses adaptive rendering when viewed in a mobile browser. - If set to
MobileMode.Phone, the component always uses adaptive rendering, regardless of the browser type.
When using mobile rendering, set the
Heightexplicitly. Otherwise, each Scheduler view might render with a different height.
The following example demonstrates how to configure the adaptive rendering mode of the Scheduler.
Razor
@(Html.Kendo().Scheduler<KendoSchedulerAjaxEditing.Models.TaskViewModel>() .Name("scheduler") .Mobile(MobileMode.Auto) .Date(new DateTime(2013, 6, 13)) .StartTime(new DateTime(2013, 6, 13, 7, 00, 00)) .Height(600) .Views(views => { views.DayView(); views.WeekView(weekView => weekView.Selected(true)); views.MonthView(); views.AgendaView(); }) .Timezone("Etc/UTC") .DataSource(d => d .Model(m => { m.Id(f => f.TaskID); m.Field(f => f.OwnerID).DefaultValue(1); m.RecurrenceId(f => f.RecurrenceID); }) .Read("Tasks_Read", "Home") .Create("Tasks_Create", "Home") .Destroy("Tasks_Destroy", "Home") .Update("Tasks_Update", "Home") ) )