New to Telerik UI for WinUI? Download free 30-day trial

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 
        return this.appointments; 
        this.appointments = value; 
public BindableCollection<ResourceType> ResourcesTypes 
        return this.resourceTypes; 
        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"); 
    ResourceType speakerType = new ResourceType("Speaker"); 
    Resource tomSpeaker = new Resource("Tom"); 
    Resource peterSpeaker = new Resource("Peter"); 
    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:DayViewDefinition /> 
        <telerik:WeekViewDefinition /> 
        <telerik:TimelineViewDefinition /> 
            <telerik:DateGroupDescription /> 
            <telerik:ResourceGroupDescription ResourceType="Speaker" /> 
            <telerik:ResourceGroupDescription ResourceType="Room" /> 
  • Finally, set the DataContext:

Example 7

this.DataContext = new MyViewModel(); 

See Also

In this article
Not finding the help you need?