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
<telerik:RadScheduler />
- Create a new class named MyViewModel.
Example 2
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
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
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
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
<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
this.DataContext = new MyViewModel();