How to create a CustomGrouping in the WPF SfScheduler ?
CustomGrouping is used to group the schedule appointments based on the resources you select. By using the CustomGrouping, you can add the same appointment for multiple resources simultaneously. This article explains about how to group the appointments based on the resources.
Creating CustomGrouping
- Create a WPF application and add the SfSchedule control to it. Add Resources in the ScheduleResourceTypeCollection and create buttons to change the resource type dynamically by using the button click event as in the following code example.
XAML
<Grid Background="GhostWhite">
<Grid.RowDefinitions>
<RowDefinition Height="auto" ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
<Button x:Name="television" Content="Television" Click="Button_Click_1" Height="35" Margin="5" Foreground="White" Background="#FF25A0DA" Width="200" HorizontalAlignment="Center" ></Button>
<Button x:Name="programs" Width="200" Click="Button_Click_1" Height="35" Margin="5" Foreground="White" Background="#FF25A0DA" Content="Programs" HorizontalAlignment="Center"/>
</StackPanel>
<syncfusion:SfSchedule Grid.Column="0" ScheduleType="Week" DayHeaderOrder="OrderByDate"
IntervalHeight="30" Background="WhiteSmoke" Appointments="{Binding FilterColl}" Resource="TV" CurrentDateBackground="#63A028" HeaderBackground="#FF25A0DA" x:Name="schedule" Grid.Row="1" >
<syncfusion:SfSchedule.ScheduleResourceTypeCollection>
<syncfusion:ResourceType TypeName="TV" >
<syncfusion:Resource ResourceName="TV1" DisplayName="StarSports" />
<syncfusion:Resource ResourceName="TV2" DisplayName="ESPN"/>
<syncfusion:Resource ResourceName="TV3" DisplayName="TenSports"/>
</syncfusion:ResourceType>
<syncfusion:ResourceType TypeName="programs">
<syncfusion:Resource ResourceName="FootBall" DisplayName="FootBall"/>
<syncfusion:Resource ResourceName="Cricket" DisplayName="Cricket"/>
<syncfusion:Resource ResourceName="News" DisplayName="News"/>
</syncfusion:ResourceType>
</syncfusion:SfSchedule.ScheduleResourceTypeCollection>
</syncfusion:SfSchedule>
</Grid>
In the above code, two types of resources are used.
Television
- StarSports
- ESPN
- TenSports
Programs
- FootBall
- Cricket
- NewsNote:
In the above code example, the value of the DayHeaderOrder property is OrderByDate that is used to display multiple resources in each day. You can also set the OrderByResouce value for the same property where each Resource displays the schedule appointments in all the week days.
- Create appointment collections and group the appointments by using the GetFilterCollection method as in the following code example.
C#
public partial class MainWindow : Window
{
private ObservableCollection<DateTime> datecoll = new ObservableCollection<DateTime>();
private ObservableCollection<DateTime> dateselected = new ObservableCollection<DateTime>();
public ScheduleAppointmentCollection FilterColl { get; set; }
Random random;
public MainWindow()
{
this.InitializeComponent();
random = new Random();
for (int i = -20; i < 20; i += 2)
{
for (int j = -7; j < 7; j++)
{
datecoll.Add(DateTime.Now.Date.AddDays(j).AddHours(i));
}
}
this.FilterColl = GetFilterCollection();
this.DataContext = this;
}
private ScheduleAppointmentCollection GetFilterCollection()
{
string[] football = new string[] { "USA vs IRN ", "RUS vs ARG", "POR vs SWI", "BEL vs ARG", "USA vs RUS", "IRN vs POR", "CRO vs MEX", "JPN vs ITA", "COL vs URU" };
string[] cricket = new string[] { "IND vs PAk", "AUS vs SA", "SRI vs WI", "SA vs IND", "ZIM vs PAK", "SRI vs AUS" };
string[] news = new string[] { "Cricket news", "Football news", "Hockey news", "Tennis news", "news of Athletics", "Golf news", "Kabaddi news", "VolleyBall news" };
string[] pgms = new string[] { "FootBall", "Cricket", "News" };
ScheduleAppointmentCollection app = new ScheduleAppointmentCollection();
for (int dc = 0; dc < datecoll.Count-1; dc++)
{
DateTime date = datecoll[dc];
dateselected.Add(date);
for (int sd = 0; sd < dateselected.Count - 1; sd++)
{
if (date == dateselected[sd])
{
date = date.AddDays(1);
}
}
ScheduleAppointment app1 = new ScheduleAppointment() { StartTime = date };
app1.ResourceCollection.Add(new Resource() { ResourceName = "TV" + random.Next(1, 4), TypeName = "TV" });
app1.ResourceCollection.Add(new Resource() { ResourceName = pgms[random.Next(0, 3)], TypeName = "programs" });
if (app1.ResourceCollection[1].ResourceName.Equals("FootBall"))
{
app1.Subject = football[random.Next(0, football.Length)];
app1.EndTime = date.AddHours(1);
}
else if (app1.ResourceCollection[1].ResourceName.Equals("Cricket"))
{
app1.Subject = cricket[random.Next(0, cricket.Length)];
app1.EndTime = date.AddHours(1);
}
else
{
app1.Subject = news[random.Next(0, news.Length)];
app1.EndTime = date.AddHours(1);
}
app1.AppointmentBackground = new SolidColorBrush(Colors.DimGray);
app.Add(app1);
}
return app;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
string str = (sender as Button).Content.ToString();
if (str.Equals("Television"))
{
programs.IsEnabled = true;
this.schedule.Resource = "TV";
television.IsEnabled = false;
}
else
{
television.IsEnabled = true;
this.schedule.Resource = "programs";
programs.IsEnabled = false;
}
}
}
In the above code example, in GetFilterCollection method both the resources, Television and Programs are added in a same appointment by using the Resource property. When the resource of the schedule is changed to any other type, the same appointment is used to display.
- When the resource type is Programs, then the appointments are filtered based on the resource name as in the above code example.Note:
For an example, when the resource name is FootBall, then the appointments are related to football.
- The default resource type is Television where each resource has the appointments of all the three programs such as football, cricket and news. When you change the resource type as Programs, then appointments are filtered, and each resource has the appointments related to the same resource name.
The following screenshots display the schedule appointments based on the resource type.
Figure 1: Appointments based on resource type of Television (in week view)
Figure 2: Filtered Appointments in the resource type of Programs (in week view)
Sample Link
Conclusion
I hope you enjoyed learning about how to create a CustomGrouping in the WPF SfScheduler.
You can refer to our WPF SfScheduler featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinRT DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can
