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.

Telerik UI for Blazor Ninja image

The ListView component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor ListView

  1. Add the TelerikListView tag to a Razor file.

  2. Populate its Data property with the collection of items you want the user to see.

  3. Define the Template to style the items layout.

  4. (optional) Define the HeaderTemplate to style the list header.

  5. (optional) Set the Pageable property 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.

Next Steps

See Also

In this article