How to apply different templates to different appointments of Telerik Scheduler for WPF/Silverlight.
In the upcoming Q2 release RadScheduler will include a new property called AppointmentTemplateSelector. This property will be included in both Silverlight and WPF versions of the control.
Using it, you will be able to easily apply different DataTemplate to the appointments by any custom condition.
All you need to do is to create a custom class inheriting from the DataTemplateSelector class and override the SelectTemplate method.
Using it, you will be able to easily apply different DataTemplate to the appointments by any custom condition.
All you need to do is to create a custom class inheriting from the DataTemplateSelector class and override the SelectTemplate method.
For example:
| public class AppointmentTemplateSelector : DataTemplateSelector |
| { |
| public DataTemplate RedAppointmentTemplate { get; set; } |
| public DataTemplate GreenAppointmentTemplate { get; set; } |
| public override DataTemplate SelectTemplate(object item, DependencyObject container) |
| { |
| base.SelectTemplate(item, container); |
| AppointmentSlot appointmentSlot = item as AppointmentSlot; |
| var appointment = appointmentSlot.Occurrence.Appointment; |
| if (appointment != null && appointment.Start.Date == DateTime.Today) |
| { |
| return RedAppointmentTemplate; |
| } |
| return GreenAppointmentTemplate; |
| } |
| } |
Then you need to define two DataTemplates – one for the “red” appointments and another for the “green” appointments:
| <DataTemplate x:Key="RedAppointmentTemplate"> |
| <Border Background="Red” |
| BorderThickness="1" |
| CornerRadius="8" Margin="-2"> |
| <TextBox x:Name="PART_SubjectTextBox" Margin="7 0 18 0" |
| VerticalAlignment="Top" HorizontalAlignment="Left" |
| Text="{Binding Path=Occurrence.Appointment.Subject}" |
| Foreground="Black" TextWrapping="Wrap" MaxWidth="100" /> |
| </Border> |
| </DataTemplate> |
| <DataTemplate x:Key="GreenAppointmentTemplate"> |
| <Border Background="LightGreen” |
| BorderThickness="1" |
| CornerRadius="8" Margin="-2"> |
| <TextBox x:Name="PART_SubjectTextBox" Margin="7 0 18 0" |
| VerticalAlignment="Top" HorizontalAlignment="Left" |
| Text="{Binding Path=Occurrence.Appointment.Subject}" |
| Foreground="Black" TextWrapping="Wrap" MaxWidth="100" /> |
| </Border> |
| </DataTemplate> |
Add the AppointmentTemplateSelector to the resources:
| <local:AppointmentTemplateSelector x:Key="ItemTemplateSelector" |
| RedAppointmentTemplate ="{StaticResource RedAppointmentTemplate}" |
| GreenAppointmentTemplate ="{StaticResource GreenAppointmentTemplate }" /> |
Set the AppointmentTemplateSelector property of RadScheduler:
| <telerik:RadScheduler x:Name="scheduler" AppointmentTemplateSelector="{StaticResource ItemTemplateSelector}" /> |
The result of the above code will be red today’s appointments, whereas all other appointments will appear in green:
Download the source code for Silverlight and stay tuned for more in our Q2 release.
About the Author
Rossitza Fakalieva
Rossitza Fakalieva was a leader of Telerik engineering teams working with XAML technologies—Telerik UI for WPF, Telerik UI for Xamarin and Telerik UI for .NET MAUI.
Related Posts
Comments
Comments are disabled in preview mode.
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required