New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Preserving the ButtonGroup View for Mobile Rendering in Scheduler
Environment
| Product | Progress Telerik UI for ASP.NET MVC Scheduler |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.3.1114 version |
Description
How can I prevent the transmutation from a ButtonGroup to a DropDownList for different screen sizes when working with the Telerik UI for ASP.NET MVC Scheduler with Adaptive Rendering ?
Solution
Follow the steps below to achieve the desired scenario:
- Create a variable that will hold the DOM representation of the ButtonGroup. Which will contain the
day,month,agenda, andweek,timeline, andyearbuttons. - Subscribe to the document.ready() event.
- Within the handler, replace the transformed DropDownList element by using the replaceWith() method.
- From there, add a click handler to each of the buttons from the previously created ButtonGroup. And based on an assertion, call the client-side view() method of the Scheduler with the appropriate view name.
- To change a given button's state upon selection, add the
k-selectedstate class. - Subscribe to the window.resize event and replace the transformed DropDownList when the view dimensions are changed.
Index.cshtml
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.MeetingViewModel>()
.Name("scheduler")
.Date(new DateTime(2022, 6, 13))
.StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView();
views.MonthView(mv => mv.Selected(true));
views.YearView();
views.AgendaView();
views.TimelineView();
})
.Mobile(MobileMode.Phone)
.Timezone("Etc/UTC")
.Resources(resource =>
{
resource.Add(m => m.RoomID)
.Title("Room")
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
});
resource.Add(m => m.Attendees)
.Title("Attendees")
.Multiple(true)
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Alex", Value = 1, Color = "#f8a398" },
new { Text = "Bob", Value = 2, Color = "#51a0ed" },
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
});
})
.DataSource(d => d
.Custom()
.Batch(true)
.Schema(schema => schema
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From("Description");
m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From("StartTimezone");
m.Field("endTimezone", typeof(string)).From("EndTimezone");
}))
.Transport(transport => transport
.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/meetings")
.DataType("jsonp"))
.Create(create => create.Url("https://demos.telerik.com/kendo-ui/service/meetings/create")
.DataType("jsonp"))
.Destroy(destroy => destroy.Url("https://demos.telerik.com/kendo-ui/service/meetings/destroy")
.DataType("jsonp"))
.Update(update => update.Url("https://demos.telerik.com/kendo-ui/service/meetings/update")
.DataType("jsonp"))
.ParameterMap("parameterMap"))
)
)For the complete implementation of the suggested approach, refer to the following Telerik REPL example.