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:

XAML

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

RadComboBox is added to the ControlTemplate of the EditAppointmentDialog:

XAML

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

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

C#

public class MyViewModel:ViewModelBase
{
    public ObservableCollection<Appointment> Appointments
    {
        get;
        private set;
    }
    public ObservableCollection<string> ComboBoxItems
    {
        get;
        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"
        };
    }
}

VB.NET

Public Class MyViewModel
    Public Property Appointments() As ObservableCollection(Of Appointment)
        Get
            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)
        Get
            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 {
         "item1",
         "item2",
         "item3"
        }
    End Sub
End Class

If the DataContext is set in XAML:

XAML

<UserControl.Resources>
    <my:MyViewModel x:Key="MyViewModel" />
    ...
</UserControl.Resources>

The ItemsSource can be bound like this:

XAML

<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:

XAML

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