Dynamic loading of Data

[virginie]

Hello,

i would like to know if it's possible to load Appointments dynamically as we Navigate in the calendar, right now i m loading all the data at once, and it made the calendar very slow.

Thanks

[Lance | Manager Technical Support]

Hi Virginie,

At this time, the Calendar doesn't have a load-on-demand feature for AppointmentsSource. If you'd like to add a feature request, you do so here in the Feedback Portal.

However, you can try using async/await to load the data from your data source so that it doesn't tie up the UI thread while it's loading the data. Go here to learn more about using the async/await pattern in Xamarin.Forms.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Glenn Henriksen]

Wait, what? Are you saying that I cannot start by showing the calendar with appointments for one month, and when I move to the next month I can't add more appointments to the collection (and perhaps remove old ones)? I have to assign all the appointments right away?

[Lance | Manager Technical Support]

Hi Glenn,

The Calendar doesn't have built-in support for data source types that implement ISupportIncrementalLoading (MSDN). We do support this for the ListView via the LoadOnDemandCollection, but it's not implemented for the Calendar.

You can certainly add or remove appointments from a bound collection as long as that supports CollectionChanged, for example: ObservableCollection<Appointment>.


Demo

I've attached a demo that only loads the appointments for the currently visible month and updates it when the month changes. Here's an overview of the approach.

If you have a RadCalendar on the page and the AppointmentSource is bound to a collection in the view model:

<telerikInput:RadCalendar AppointmentsSource="{Binding MyAppointments}"
                  DisplayDateChanged="Calendar_OnDisplayDateChanged"/>

Also in the view model is a list of all the appointments and just the collection bound to Calendar:

public class ViewModel
{
    private readonly List<Appointment> allAppointments;

    public ViewModel()
    {
        // This contains all of the appointments
        allAppointments = GetAllAppointments();
    }

    public ObservableCollection<Appointment> MyAppointments { get; set; } = new ObservableCollection<Appointment>();
}

Now, lets add a method to the view model that can filter the allAppointments list and add them to the bound MyAppointments collection:

public void FilterAppointments(DateTime filterDateTime)
{
    // Clear any appointments you don't want, in this case I'm clearing everything
    MyAppointments.Clear();

    // Here I filter by just the appointments for the currently visible Month
    // "allAppointments" is the entire list of 200 appointments
    var filteredAppointments = allAppointments.Where(a
        => a.StartDate.Month == filterDateTime.Month
        && a.StartDate.Year == filterDateTime.Year).ToList();

    // now, add the filtered appointments to the
    // collection bound to the calendar's AppointmentsSource
    foreach (var appt in filteredAppointments)
        MyAppointments.Add(appt);
}

The last thing to do is hook into the Calendar's DisplayDateChanged event, this way when the month changes, only the appointments for that month are shown.

private void Calendar_OnDisplayDateChanged(object sender, ValueChangedEventArgs<object> e)
{
    (BindingContext as ViewModel)?.FilterAppointments((DateTime)e.NewValue);
}

The takeaway is that it's the ObservableCollection that is what contains the appointments bound to the Calendar. You can change those items as you see fit.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Glenn Henriksen]

Ah, that's okay then. Thank you for a very thorough example!