Scheduler Resource Grouping
The feature allows grouping Scheduler events by one or more resources. All available supported views: Day
, Week
, MultiDay
and Month
can render both horizontal
and vertical
grouping.
This article contains the following sections:
Basics
In the grouping rendering in both horizontal and vertical orientation, the view tables are rendered next to each other.
Moving an appointment between the resource tables is allowed, and upon dropping, the appointment resource changes alongside the start date.
Define Settings
To configure the group rendering, define the SchedulerGroupSettings
tag inside the SchedulerSettings
tag.
The settings tag will have the following Parameters:
Resources(List<string>)
- provides a list of one or more resource names, which will be used to group the events.Orientation(SchedulerGroupOrientation)
- has two values:Horizontal
(default) andVertical
. Determines the direction in which the resource tables are rendered.
Examples
The examples below showcase resource grouping by one resource and resource grouping by multiple resources respectively.
Resource Grouping by one resource
@* The example showcases Resource Grouping by one resource. *@
@using System.Collections.Generic
@inject AppointmentService appointmentService
@inject ResourceService resourceService
<div class="example-wrapper">
<TelerikScheduler @bind-Date="@SelectedDate" Height="600px" Data="@Data"
OnCreate="@AddAppointment"
OnUpdate="@UpdateAppointment"
OnDelete="@DeleteAppointment"
AllowDelete="true"
AllowUpdate="true"
AllowCreate="true"
OnCancel="@(() => Console.WriteLine("CANCEL"))">
<SchedulerSettings>
<SchedulerGroupSettings Resources="@GroupingResources" Orientation="@SchedulerGroupOrientation.Horizontal"></SchedulerGroupSettings>
</SchedulerSettings>
<SchedulerViews>
<SchedulerDayView></SchedulerDayView>
<SchedulerWeekView></SchedulerWeekView>
<SchedulerMultiDayView></SchedulerMultiDayView>
<SchedulerMonthView></SchedulerMonthView>
<SchedulerTimelineView></SchedulerTimelineView>
</SchedulerViews>
<SchedulerResources>
<SchedulerResource Field="Room" Title="Edit Room" Data="@SchedulerResources"></SchedulerResource>
</SchedulerResources>
</TelerikScheduler>
</div>
@code
{
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
List<Appointment> Data = new List<Appointment>();
List<Resource> SchedulerResources = new List<Resource>();
List<Resource> SchedulerManagers = new List<Resource>();
List<Resource> SchedulerDirectors = new List<Resource>();
List<string> GroupingResources = new List<string> { "Room" };
protected override async Task OnInitializedAsync()
{
SchedulerDirectors = await resourceService.GetDirectorsAsync();
SchedulerResources = await resourceService.GetResourcesAsync();
SchedulerManagers = await resourceService.GetManagersAsync();
Data = await appointmentService.GetAppointmentsAsync();
}
void UpdateAppointment(SchedulerUpdateEventArgs args)
{
Appointment item = (Appointment)args.Item;
var matchingItem = Data.FirstOrDefault(a => a.Id == item.Id);
if (matchingItem != null)
{
matchingItem.Title = item.Title;
matchingItem.Description = item.Description;
matchingItem.Start = item.Start;
matchingItem.End = item.End;
matchingItem.IsAllDay = item.IsAllDay;
matchingItem.Room = item.Room;
matchingItem.Manager = item.Manager;
}
}
void AddAppointment(SchedulerCreateEventArgs args)
{
Appointment item = args.Item as Appointment;
Data.Add(item);
}
void DeleteAppointment(SchedulerDeleteEventArgs args)
{
Appointment item = (Appointment)args.Item;
Data.Remove(item);
}
}
Resource Grouping by multiple resources
Declare multiple resources.
@* The example showcases Resource Grouping by two resources. *@
@using System.Collections.Generic
@inject AppointmentService appointmentService
@inject ResourceService resourceService
<div class="example-wrapper">
<TelerikScheduler @bind-Date="@SelectedDate" Height="600px" Data="@Data"
OnCreate="@AddAppointment"
OnUpdate="@UpdateAppointment"
OnDelete="@DeleteAppointment"
AllowDelete="true"
AllowUpdate="true"
AllowCreate="true"
OnCancel="@(() => Console.WriteLine("CANCEL"))">
<SchedulerSettings>
<SchedulerGroupSettings Resources="@GroupingResources" Orientation="@SchedulerGroupOrientation.Horizontal"></SchedulerGroupSettings>
</SchedulerSettings>
<SchedulerViews>
<SchedulerDayView></SchedulerDayView>
<SchedulerWeekView></SchedulerWeekView>
<SchedulerMultiDayView></SchedulerMultiDayView>
<SchedulerMonthView></SchedulerMonthView>
<SchedulerAgendaView></SchedulerAgendaView>
</SchedulerViews>
<SchedulerResources>
<SchedulerResource Field="Manager" Title="Manager" Data="@SchedulerManagers"></SchedulerResource>
<SchedulerResource Field="Room" Title="Edit Room" Data="@SchedulerResources"></SchedulerResource>
</SchedulerResources>
</TelerikScheduler>
</div>
@code
{
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
List<Appointment> Data = new List<Appointment>();
List<Resource> SchedulerResources = new List<Resource>();
List<Resource> SchedulerManagers = new List<Resource>();
List<Resource> SchedulerDirectors = new List<Resource>();
List<string> GroupingResources = new List<string> { "Room", "Manager" };
protected override async Task OnInitializedAsync()
{
SchedulerDirectors = await resourceService.GetDirectorsAsync();
SchedulerResources = await resourceService.GetResourcesAsync();
SchedulerManagers = await resourceService.GetManagersAsync();
Data = await appointmentService.GetAppointmentsAsync();
}
void UpdateAppointment(SchedulerUpdateEventArgs args)
{
Appointment item = (Appointment)args.Item;
var matchingItem = Data.FirstOrDefault(a => a.Id == item.Id);
if (matchingItem != null)
{
matchingItem.Title = item.Title;
matchingItem.Description = item.Description;
matchingItem.Start = item.Start;
matchingItem.End = item.End;
matchingItem.IsAllDay = item.IsAllDay;
matchingItem.Room = item.Room;
matchingItem.Manager = item.Manager;
}
}
void AddAppointment(SchedulerCreateEventArgs args)
{
Appointment item = args.Item as Appointment;
Data.Add(item);
}
void DeleteAppointment(SchedulerDeleteEventArgs args)
{
Appointment item = (Appointment)args.Item;
Data.Remove(item);
}
}