Edit this page

Add RadComboBox to a custom EditAppointmentDialog

This tutorial explains how to bind additional controls in a custom EditAppointmentDialog to properties in the ViewModel of the RadScheduleView.

Before we proceed, check these topics:

Let’s have the following RadScheduleView with EditAppointmentDialogStyle set to the generated Style:

<telerik:RadScheduleView x:Name="ScheduleView"
    AppointmentsSource="{Binding Appointments}"
    EditAppointmentDialogStyle="{StaticResource EditAppointmentDialogStyle}">
       <telerik:DayViewDefinition />

RadComboBox is added to the ControlTemplate of the EditAppointmentDialog:

<ControlTemplate x:Key="EditAppointmentTemplate" TargetType="local:SchedulerDialog">
    <telerik:RadComboBox  />

The ViewModel of the ScheduleView has an additional property called “ComboBoxItems” which will be used to populate it:

public class MyViewModel:ViewModelBase
    public ObservableCollection<Appointment> Appointments
        private set;
    public ObservableCollection<string> ComboBoxItems
        private set;
    public MyViewModel()
        Appointments = new ObservableCollection<Appointment>() {
            new Appointment() {
                Subject="test app",
                Start = DateTime.Now,
                End = DateTime.Now.AddHours(2)
        ComboBoxItems = new ObservableCollection<string>() {
            "item1", "item2", "item3"
Public Class MyViewModel
    Public Property Appointments() As ObservableCollection(Of Appointment)
            Return m_Appointments
        End Get
        Private Set(value As ObservableCollection(Of Appointment))
            m_Appointments = value
        End Set
    End Property
    Private m_Appointments As ObservableCollection(Of Appointment)
    Public Property ComboBoxItems() As ObservableCollection(Of String)
            Return m_ComboBoxItems
        End Get
        Private Set(value As ObservableCollection(Of String))
            m_ComboBoxItems = value
        End Set
    End Property
    Private m_ComboBoxItems As ObservableCollection(Of String)

    Public Sub New()
        Appointments = New ObservableCollection(Of Appointment)() From {
         New Appointment() With {
          .Subject = "test app",
          .Start = DateTime.Now,
         .[End] = DateTime.Now.AddHours(2)
        ComboBoxItems = New ObservableCollection(Of String)() From {
    End Sub
End Class

If the DataContext is set in XAML:

    <my:MyViewModel x:Key="MyViewModel" />

The ItemsSource can be bound like this:

<telerik:RadComboBox ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=ComboBoxItems, Mode=TwoWay}" />

Here is the result:

RadComboBox in EditAppointmentDialog

In order to preselect a certain item in the RadComboBox, bind SelectedItem to a property in your custom appointment class:

<telerik:RadComboBox SelectedItem="{Binding Occurrence.Appointment.ComboBoxItem, Mode=TwoWay}"
            ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=ComboBoxItems, Mode=TwoWay}" />
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article