Scheduler - Refresh Data
The most common reason you would use an ObservableCollection is to make a component (like a grid, treeview, treelist, dropdown) change or react when you change that collection.
When you want to refresh the component data source like that, there are two important framework behaviors you need to be aware of - when ObservableCollection instances fire events, and how to refresh the data of a component when it is not an observable collection.
In this article:
Rebind Method
You can refresh the Scheduler data by using the Rebind method exposed to the reference of the TelerikScheduler.
Use the Rebind method to refresh the Scheduler data.
@* Add/remove an appointment or change the data collection to see how the Scheduler reacts to that change. *@
<TelerikButton OnClick="@AddAppointment">Add appointment</TelerikButton>
<TelerikButton OnClick="@RemoveAppointment">Remove appointment</TelerikButton>
<TelerikButton OnClick="@ChangeData">Change data</TelerikButton>
<TelerikScheduler @ref="SchedulerRef" Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
@code {
TelerikScheduler<SchedulerAppointment> SchedulerRef { get; set; }
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
void AddAppointment()
{
Appointments.Add(
new SchedulerAppointment
{
Title = "Hairdresser",
Description = "I need to get my hair cut.",
Start = new DateTime(2019, 11, 28, 10, 0, 0),
End = new DateTime(2019, 11, 28, 11, 0, 0)
});
SchedulerRef.Rebind();
}
void RemoveAppointment()
{
if (Appointments.Count > 0)
{
Appointments.RemoveAt(Appointments.IndexOf(Appointments.Last()));
Appointments = new List<SchedulerAppointment>(Appointments);
}
}
void ChangeData()
{
Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Hairdresser",
Description = "I need to get my hair cut.",
Start = new DateTime(2019, 11, 25, 9, 30, 0),
End = new DateTime(2019, 11, 25, 10, 30, 0)
},
new SchedulerAppointment
{
Title = "Lunch with Alice",
Description = "Spend some time with a friend",
Start = new DateTime(2019, 11, 28, 12, 0, 0),
End = new DateTime(2019, 11, 28, 13, 0, 0)
}
};
SchedulerRef.Rebind();
}
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 11, 26, 11, 30, 0),
End = new DateTime(2019, 11, 26, 12, 0, 0)
},
new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 11, 25, 9, 30, 0),
End = new DateTime(2019, 11, 25, 12, 45, 0)
},
new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 07)
}
};
public class SchedulerAppointment
{
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
}
}
Observable Data
Refresh the Scheduler data by creating a New collection reference.
Databound components can benefit from live updates - when the data source collection changes, the components should update to reflect that change. Most data-bound components in the Telerik UI for Blazor suite implement such functionality.
When the Data of the component is a collection that implements the INotifyCollectionChanged interface (such as ObservableCollection), the Telerik components subscribe to its CollectionChanged event to make live update. This means that adding items, removing items, or clearing the collection updates the components (its .Add(), .Remove() and .Clear() methods).
The Observable collections fire the CollectionChanged event only when their Add, Remove and Clear methods are called. They do not fire it when you change the value of a field of one of their elements.
New Collection Reference
In Blazor, the framework will fire the OnParametersSet event of a child component (which is how child components can react to outside changes) only when it can detect a change in the object it receives through the corresponding parameter (like Data for the data sources of Telerik components). This detection works as follows:
For strings and value types, this happens when their value changes.
-
For reference types (such as data collections like
List, or anyIEnumerable, and application-specific objects), this happens when the object reference changes.Thus, you would usually need to create a
newreference for the view-model field (such asTreeViewData = new List<MyTreeViewItem>(theUpdatedDataCollection);) when you want the component to update.
Create new collection reference to refresh the Scheduler data.
@* Add/remove an appointment or change the data collection to see how the Scheduler reacts to that change. *@
<TelerikButton OnClick="@AddAppointment">Add appointment</TelerikButton>
<TelerikButton OnClick="@RemoveAppointment">Remove appointment</TelerikButton>
<TelerikButton OnClick="@ChangeData">Change data</TelerikButton>
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
@code {
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
void AddAppointment()
{
Appointments.Add(
new SchedulerAppointment
{
Title = "Hairdresser",
Description = "I need to get my hair cut.",
Start = new DateTime(2019, 11, 28, 10, 0, 0),
End = new DateTime(2019, 11, 28, 11, 0, 0)
});
Appointments = new List<SchedulerAppointment>(Appointments);
}
void RemoveAppointment()
{
if (Appointments.Count > 0)
{
Appointments.RemoveAt(Appointments.IndexOf(Appointments.Last()));
Appointments = new List<SchedulerAppointment>(Appointments);
}
}
void ChangeData()
{
Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Hairdresser",
Description = "I need to get my hair cut.",
Start = new DateTime(2019, 11, 25, 9, 30, 0),
End = new DateTime(2019, 11, 25, 10, 30, 0)
},
new SchedulerAppointment
{
Title = "Lunch with Alice",
Description = "Spend some time with a friend",
Start = new DateTime(2019, 11, 28, 12, 0, 0),
End = new DateTime(2019, 11, 28, 13, 0, 0)
}
};
Appointments = new List<SchedulerAppointment>(Appointments);
}
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 11, 26, 11, 30, 0),
End = new DateTime(2019, 11, 26, 12, 0, 0)
},
new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 11, 25, 9, 30, 0),
End = new DateTime(2019, 11, 25, 12, 45, 0)
},
new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 07)
}
};
public class SchedulerAppointment
{
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
}
}