ListView - 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
To refresh the ListView data when using OnRead, call the Rebind method of the TelerikListView reference. This will fire the OnRead event and execute the business logic in the handler.
@* Clicking on the Rebind button will delete the first item from the ListView and refresh the data *@
@using Telerik.DataSource.Extensions
<div class="example-box">
<h3>Pressing rebind will remove the first item from the listview and rebind it.</h3>
<TelerikButton OnClick="@RebindListView">Rebind</TelerikButton>
<TelerikListView @ref="@ListViewRef"
TItem="SampleData"
OnRead="@ReadItems"
Width="700px"
Pageable="true">
<Template>
<div class="custom-listview-item">
<h4>@context.Name</h4>
<h5>@context.Team</h5>
</div>
</Template>
</TelerikListView>
</div>
@code {
private List<SampleData> SourceData { get; set; }
private TelerikListView<SampleData> ListViewRef { get; set; }
void ReadItems(ListViewReadEventArgs args)
{
if (SourceData == null)
{
SourceData = Enumerable.Range(1, 5).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x}"
}).ToList();
}
var datasourceResult = SourceData.ToDataSourceResult(args.Request);
args.Data = datasourceResult.Data;
args.Total = datasourceResult.Total;
}
void RebindListView()
{
if (SourceData.Count > 0)
{
SourceData.RemoveAt(0);
}
ListViewRef.Rebind();
}
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
@* Styles would usually go to to the site stylesheet *@
<style>
.k-listview-item {
display: inline-block;
}
.custom-listview-item {
height: 150px;
width: 150px;
margin: 10px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>
As part of our
3.0.1release we introduced theRebindmethod to the component reference. This would make the rest of the approaches in this article obsolete.
Observable Data
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.
Bind the ListView to an ObservableCollection, so it can react to collection changes.
@* Add/remove employee to see how the ListView reacts to that change. *@
@using System.Collections.ObjectModel
<TelerikButton OnClick="@AddEmployee">Add employee</TelerikButton>
<TelerikButton OnClick="@RemoveEmployee">Remove employee</TelerikButton>
<TelerikListView Data="@ListViewData" Width="700px" Pageable="true">
<HeaderTemplate>
<h2>Employee List</h2>
</HeaderTemplate>
<Template>
<div class="custom-listview-item">
<h4>@context.Name</h4>
<h5>@context.Team</h5>
</div>
</Template>
</TelerikListView>
@code {
void AddEmployee()
{
var x = ListViewData.Count + 1;
ListViewData.Add(new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x % 3}"
});
}
void RemoveEmployee()
{
if (ListViewData.Count > 0)
{
ListViewData.RemoveAt(ListViewData.Count - 1);
}
}
ObservableCollection<SampleData> ListViewData { get; set; } = new ObservableCollection<SampleData>(Enumerable.Range(1, 5).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x % 3}"
}));
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
@* Styles would usually go to to the site stylesheet *@
<style>
.k-listview-item {
display: inline-block;
}
.custom-listview-item {
height: 150px;
width: 150px;
margin: 10px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>
If you need to add/remove many items to/from the collection, consider creating a new collection and provide its reference to the data parameter. Thus, the component will re-render only once (when the data collection reference is changed) instead of re-rendering multiple times in response to the Add/Remove events.
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 ListView data.
@* Add/remove employee or change the collection to see how the ListView reacts to that change. *@
<TelerikButton OnClick="@AddEmployee">Add employee</TelerikButton>
<TelerikButton OnClick="@RemoveEmployee">Remove employee</TelerikButton>
<TelerikButton OnClick="@ChangeData">Change employee data</TelerikButton>
<TelerikListView Data="@ListViewData" Width="700px" Pageable="true">
<HeaderTemplate>
<h2>Employee List</h2>
</HeaderTemplate>
<Template>
<div class="custom-listview-item">
<h4>@context.Name</h4>
<h5>@context.Team</h5>
</div>
</Template>
</TelerikListView>
@code {
void AddEmployee()
{
var x = ListViewData.Count + 1;
ListViewData.Add(new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x % 3}"
});
ListViewData = new List<SampleData>(ListViewData);
}
void RemoveEmployee()
{
if (ListViewData.Count > 0)
{
ListViewData.RemoveAt(ListViewData.Count - 1);
ListViewData = new List<SampleData>(ListViewData);
}
}
void ChangeData()
{
var newData = Enumerable.Range(6, 5).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x % 3}"
}).ToList();
ListViewData = new List<SampleData>(newData);
}
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 5).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}",
Team = $"Team {x % 3}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
@* Styles would usually go to to the site stylesheet *@
<style>
.k-listview-item {
display: inline-block;
}
.custom-listview-item {
height: 150px;
width: 150px;
margin: 10px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>