Implementing View-ViewModel

The purpose of this tutorial is to show you how to bind a RadScheduleView with a ViewModel.

Before reading this tutorial you should get familiar with the Data Binding support of the RadScheduleView control.

• Add a new RadScheduleView declaration in your XAML

<telerik:RadScheduleView /> 

• Create a new class named MyViewModel.

public class MyViewModel 
{ 
} 

Public Class MyViewModel 
End Class 

• In the MyViewModel class add two properties:

1. Appointments - we will bind the AppointmentsSource property of the RadScheduleView to this property.

2. ResourcesTypes - we will bind the ResourceTypesSource property of the RadScheduleView to this property.

private ObservableCollection<Appointment> appointments; 
private ObservableCollection<ResourceType> resourceTypes; 
public ObservableCollection<Appointment> Appointments 
{ 
    get 
    { 
        return this.appointments; 
    } 
    set 
    { 
        this.appointments = value; 
    } 
} 
public ObservableCollection<ResourceType> ResourcesTypes 
{ 
    get 
    { 
        return this.resourceTypes; 
    } 
    set 
    { 
        this.resourceTypes= value; 
    } 
} 

Private m_Appointments As ObservableCollection(Of Appointment) 
Private m_ResourceTypes As ObservableCollection(Of ResourceType) 
 
Public Property Appointments() As ObservableCollection(Of Appointment) 
    Get 
        Return Me.m_Appointments 
    End Get 
    Private Set(value As ObservableCollection(Of Appointment)) 
        Me.m_Appointments = value 
    End Set 
End Property 
 
Public Property ResourceTypes() As ObservableCollection(Of ResourceType) 
    Get 
        Return Me.m_ResourceTypes 
    End Get 
    Private Set(value As ObservableCollection(Of ResourceType)) 
        Me.m_ResourceTypes = value 
    End Set 
End Property 

• Let's create a method in the ViewModel that generates some Resources:
  

private ObservableCollection<ResourceType> GenerateResourceTypes() 
{ 
    ObservableCollection<ResourceType> result = new ObservableCollection<ResourceType>(); 
 
    ResourceType roomType = new ResourceType("Room"); 
    Resource room102 = new Resource("Room 102"); 
    Resource room203 = new Resource("Room 203"); 
    Resource room406 = new Resource("Room 406"); 
    roomType.Resources.Add(room102); 
    roomType.Resources.Add(room203); 
    roomType.Resources.Add(room406); 
 
    ResourceType speakerType = new ResourceType("Speaker"); 
    Resource tomSpeaker = new Resource("Tom"); 
    Resource peterSpeaker = new Resource("Peter"); 
    speakerType.Resources.Add(tomSpeaker); 
    speakerType.Resources.Add(peterSpeaker); 
 
    result.Add(roomType); 
    result.Add(speakerType); 
    return result; 
} 

Private Function GenerateResourceTypes() As ObservableCollection(Of ResourceType) 
 Dim result As New ObservableCollection(Of ResourceType)() 
 Dim roomType As New ResourceType("Room") 
 Dim room102 As New Resource("Room 102") 
 Dim room203 As New Resource("Room 203") 
 Dim room406 As New Resource("Room 406") 
 roomType.Resources.Add(room102) 
 roomType.Resources.Add(room203) 
 roomType.Resources.Add(room406) 
 Dim speakerType As New ResourceType("Speaker") 
 Dim tomSpeaker As New Resource("Tom") 
 Dim peterSpeaker As New Resource("Peter") 
 speakerType.Resources.Add(tomSpeaker) 
 speakerType.Resources.Add(peterSpeaker) 
 result.Add(roomType) 
 result.Add(speakerType) 
 Return result 
End Function 

• All we have to do is to initialize the resourceTypes and appointments fields:
  

public MyViewModel() 
{ 
    this.resourceTypes = this.GenerateResourceTypes(); 
    this.appointments = new ObservableCollection<Appointment>(); 
} 

Public Sub New() 
 Me.resourceTypes = Me.GenerateResourceTypes() 
 Me.appointments = New ObservableCollection(Of Appointment)() 
End Sub 

• The ViewModel is complete. Now, let's return to the View. Add some ViewDefinitions, GroupDescriptionsSource and bind the AppointmentsSource and ResourceTypes

<telerik:RadScheduleView AppointmentsSource="{Binding Appointments}"  
                         ResourceTypesSource="{Binding ResourcesTypes}" > 
    <telerik:RadScheduleView.ViewDefinitions> 
        <telerik:DayViewDefinition /> 
        <telerik:WeekViewDefinition /> 
        <telerik:TimelineViewDefinition /> 
    </telerik:RadScheduleView.ViewDefinitions> 
    <telerik:RadScheduleView.GroupDescriptionsSource> 
        <telerik:GroupDescriptionCollection> 
            <telerik:DateGroupDescription /> 
            <telerik:ResourceGroupDescription ResourceType="Speaker" /> 
            <telerik:ResourceGroupDescription ResourceType="Room" /> 
        </telerik:GroupDescriptionCollection> 
    </telerik:RadScheduleView.GroupDescriptionsSource> 
</telerik:RadScheduleView> 

• Finally, set the DataContext:
  

this.DataContext = new MyViewModel(); 

Me.DataContext = New MyViewModel() 

See Also

• Implementing View-ViewModel