Syncfusion® Blazor ListView Component

A powerful Blazor ListView component for displaying data in a list-like interface with selection, hierarchical structure support, and interactive layouts. Supports multiple selection modes, virtual scrolling, templates, data binding, and more. Part of Syncfusion® UI component library for .NET 8+.

Key Features

• Multiple Selection: Single and multi-select modes with checkbox support
• Hierarchical Data: Display nested data structures with parent-child relationships
• Data Binding: Support for arrays and remote data sources
• Virtual Scrolling: Efficient rendering for large datasets
• Custom Templates: Full template support for item customization
• Interactive Layouts: Multiple view layouts and grouping options
• Keyboard Navigation: Full keyboard accessibility support
• Responsive Design: Adapts to different screen sizes and devices

System Requirements

• .NET 8.0 or later (Blazor Web App, Blazor Server, Blazor WebAssembly, and Blazor Hybrid)
• See full requirements: System Requirements

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.Lists

NuGet Package Manager

Install-Package Syncfusion.Blazor.Lists

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
• For Blazor WebAssembly App: add these to wwwroot/index.html.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the Blazor ListView component to your Razor page:

@using Syncfusion.Blazor.Lists

<SfListView DataSource="@ListData">
    <ListViewFieldSettings TValue="ListItem" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>

@code {
    private List<ListItem> ListData = new()
    {
        new ListItem { Id = "1", Text = "Item 1" },
        new ListItem { Id = "2", Text = "Item 2" },
        new ListItem { Id = "3", Text = "Item 3" }
    };

    public class ListItem
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

Blazor ListView Component

The Blazor ListView Component is a list-like interface that allows users to select one or multiple items and represents data in an interactive hierarchical structure across different layouts or views.

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• Video Tutorials
• API Reference

Support and Feedback

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET