Blazor ListView Overview
The Blazor ListView component is a fully customizable templated component that repeats your layout for each item in the data source. It lets you page the data, edit items through a dedicated edit template and also add header and footer templates.
The ListView component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor ListView
Add the
TelerikListViewtag to a Razor file.Populate its
Dataproperty with the collection of items you want the user to see.Define the
Templateto style the items layout.(optional) Define the
HeaderTemplateto style the list header.(optional) Set the
Pageableproperty to enable paging and set dimensions to the component.
ListView in read mode with paging enabled.
@* Styles would usually go to to the site stylesheet, and you can read more details about
the rest of the features the component provides further in this article *@
<TelerikListView Data="@ListViewData" Width="700px" Pageable="true">
<HeaderTemplate>
<h2>Employee List</h2>
</HeaderTemplate>
<Template>
<div class="listview-item">
<h4>@context.Name</h4>
<h5>@context.Team</h5>
</div>
</Template>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 25).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; }
}
}
<style>
.listview-item {
height: 150px;
width: 150px;
display: inline-block;
margin: 10px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>
Templates
The ListView allows full control of the item rendering and layout. The component has a header, footer, and template for editing items. Read more about the Blazor ListView templates.
Editing
The ListView component has functionality to put the items in edit/insert mode, as well as delete items through dedicated command buttons. Read more about the Blazor ListView editing.
Paging
The ListView supports automatic paging of the provided data, so the user has less scrolling to do. The list also fits better in the layout. Read more about the Blazor ListView paging.
Refresh Data
The ListView can refresh its data manually so the component can react to changes in the collection. Read more about the Blazor ListView data refresh.
Events
The ListView provides events related to editing and loading data on demand. Read more about the Blazor ListView events.