Load on Demand

This article demonstrates how you can load the appointments in RadScheduler depending on the current visible range of the control. This can be very useful in scenarios where the number of appointments is very large.

There are two possible approaches to accomplish this:

1. Using the VisibleRangeChanged event.

2. Using the VisibleRangeChangedCommand and VisibleRangeChangedCommandParameter properties. This approach is effective if you wish to load the visible appointments in an MVVM-friendly manner.

Using the VisibleRangeChanged Event

To accomplish this approach, you only need to handle the VisibleRangeChanged and create a helper method to get the appointments for a particular DateSpan. Please note that you need to start with an initial collection of appointments.

Example 1: Handling the VisibleRangeChanged event

• C#

private void Scheduler_Loaded(object sender, RoutedEventArgs e) 
{ 
    this.scheduler.AppointmentsSource = this.GenerateAppointmentsForRange(new DateSpan(DateTime.Now, DateTime.Now.AddDays(2))); 
    this.scheduler.VisibleRangeChanged += ScheduleView_VisibleRangeChanged; 
} 
 
private void Scheduler_VisibleRangeChanged(object sender, EventArgs e) 
{ 
    var scheduler = sender as RadScheduler; 
    var range = scheduleView.VisibleRange; 
    scheduleView.AppointmentsSource = this.GenerateAppointmentsForRange(range); 
} 
 
private BindableCollection<Appointment> GenerateAppointmentsForRange(IDateSpan dateSpan) 
{ 
    BindableCollection<Appointment> newSource = new BindableCollection<Appointment>(); 
 
    newSource.AddRange( 
        from i in Enumerable.Range(0, (dateSpan.End - dateSpan.Start).Days * 24) 
        select new Appointment() 
        { 
            Subject = "Appointment" + i + " " + dateSpan.Start.AddHours(i).ToShortDateString(), 
            Start = dateSpan.Start.AddHours(i), 
            End = dateSpan.Start.AddHours(i + 1), 
        }); 
 
    return newSource; 
} 

Using the VisibleRangeChangedCommand

Alternatively, if you want to follow the MVVM pattern, you can create an appropriate command in your viewmodel and set it as the VisibleRangeChangedCommand of the RadScheduler control.

For example, you can define your viewmodel as shown in Example 2.

Example 2: The ViewModel class

• C#

public class ViewModel : ViewModelBase 
{ 
    private ICommand visibleRangeChanged; 
    private BindableCollection<Appointment> appointments; 
 
    public ViewModel() 
    { 
        this.Appointments = this.GenerateAppointmentsForRange(new DateSpan(DateTime.Now, DateTime.Now.AddDays(2))); 
        this.VisibleRangeChanged = new DelegateCommand(this.OnVisibleRangeExecuted, this.OnVisibleRangeCanExecute); 
    } 
 
    public BindableCollection<Appointment> Appointments 
    { 
        get 
        { 
            return this.appointments; 
        } 
        private set 
        { 
            this.appointments = value; 
            this.OnPropertyChanged("Appointments"); 
        } 
    } 
 
    public ICommand VisibleRangeChanged 
    { 
        get 
        { 
            return this.visibleRangeChanged; 
        } 
        set 
        { 
            this.visibleRangeChanged = value; 
        } 
    } 
 
    private void OnVisibleRangeExecuted(object param) 
    { 
        // The param is bound to the VisibleRange property in XAML 
        this.GenerateAppointments(param as IDateSpan); 
    } 
 
    private bool OnVisibleRangeCanExecute(object param) 
    { 
        return param != null; 
    } 
 
    private void GenerateAppointments(IDateSpan dateSpan) 
    { 
        BindableCollection<Appointment> newSource = new BindableCollection<Appointment>(); 
 
        newSource.AddRange( 
            from i in Enumerable.Range(0, (dateSpan.End - dateSpan.Start).Days * 24) 
            select new Appointment() 
            { 
                Subject = "Appointment" + i + " " + dateSpan.Start.AddHours(i).ToShortDateString(), 
                Start = dateSpan.Start.AddHours(i), 
                End = dateSpan.Start.AddHours(i + 1), 
            }); 
 
        this.Appointments = newSource; 
    } 
} 

You can now bind the VisibleRangeChangedCommand and VisibleRangeChangedCommandParameter properties as demonstrated in Example 3.

Example 3: Binding the VisibleRangeChangedCommand and VisibleRangeChangedCommandParameter properties

• XAML

<telerik:RadScheduler x:Name="scheduleView" 
                            AppointmentsSource="{Binding Appointments}"  
                            VisibleRangeChangedCommand="{Binding VisibleRangeChanged}" 
                            VisibleRangeChangedCommandParameter="{Binding  VisibleRange, RelativeSource={RelativeSource Self}}"> 
... 
</telerik:RadScheduler>