Implementing View-ViewModel

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

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

• Add a new RadScheduler declaration in your XAML

Example 1

• XAML

<telerik:RadScheduler /> 

• Create a new class named MyViewModel.

Example 2

• C#

public class MyViewModel 
{ 
} 

• In the MyViewModel class add two properties:

  • Appointments: We will bind the AppointmentsSource property of the RadScheduler to this property.
  • ResourcesTypes: We will bind the ResourceTypesSource property of the RadScheduler to this property.

Example 3

• C#

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

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

Example 4

• C#

private BindableCollection<ResourceType> GenerateResourceTypes() 
{ 
    BindableCollection<ResourceType> result = new BindableCollection<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; 
} 

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

Example 5

• C#

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

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

Example 6

• XAML

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

• Finally, set the DataContext:
  

Example 7

• C#

this.DataContext = new MyViewModel();