RadzenDataList<TItem> Class

A data list component for displaying collections of items using custom templates, with support for paging and virtualization. RadzenDataList provides a flexible way to render data in cards, tiles, or custom layouts instead of traditional table rows. Ideal when you need more control over item presentation than a traditional table provides. Perfect for product catalogs, image galleries, card-based dashboards, or any non-tabular data display. Supports complete control over item rendering via Template parameter, built-in paging with configurable page size, item wrapping to multiple columns/rows based on container width, efficient rendering for large datasets via virtualization, customizable message or template for empty state when no data exists, and on-demand data loading for server-side paging via LoadData. Use Template to define how each item should be rendered. The template receives the item as @context. Combine with RadzenRow/RadzenColumn for grid-based layouts or RadzenCard for card designs.

Inheritance

Object

ComponentBase

RadzenComponent

PagedDataBoundComponent<TItem>

RadzenDataList<TItem>

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inherited Members

PagedDataBoundComponent<TItem>.OnCollectionChanged

PagedDataBoundComponent<TItem>.Dispose

PagedDataBoundComponent<TItem>.OnDataChanged

PagedDataBoundComponent<TItem>.SetParametersAsync

PagedDataBoundComponent<TItem>.OnParametersSetAsync

PagedDataBoundComponent<TItem>.OnAfterRenderAsync

PagedDataBoundComponent<TItem>.OnPageChanged

PagedDataBoundComponent<TItem>.OnPageSizeChanged

PagedDataBoundComponent<TItem>.CalculatePager

PagedDataBoundComponent<TItem>.GoToPage

PagedDataBoundComponent<TItem>.FirstPage

PagedDataBoundComponent<TItem>.PrevPage

PagedDataBoundComponent<TItem>.NextPage

PagedDataBoundComponent<TItem>.LastPage

PagedDataBoundComponent<TItem>.PagerPosition

PagedDataBoundComponent<TItem>.PagerAlwaysVisible

PagedDataBoundComponent<TItem>.PagerHorizontalAlign

PagedDataBoundComponent<TItem>.Density

PagedDataBoundComponent<TItem>.AllowPaging

PagedDataBoundComponent<TItem>.PageSize

PagedDataBoundComponent<TItem>.PageNumbersCount

PagedDataBoundComponent<TItem>.Count

PagedDataBoundComponent<TItem>.CurrentPage

PagedDataBoundComponent<TItem>.Template

PagedDataBoundComponent<TItem>.LoadingTemplate

PagedDataBoundComponent<TItem>.Data

PagedDataBoundComponent<TItem>.PageSizeOptions

PagedDataBoundComponent<TItem>.PageSizeText

PagedDataBoundComponent<TItem>.ShowPagingSummary

PagedDataBoundComponent<TItem>.PagingSummaryFormat

PagedDataBoundComponent<TItem>.PagingSummaryTemplate

PagedDataBoundComponent<TItem>.FirstPageTitle

PagedDataBoundComponent<TItem>.FirstPageAriaLabel

PagedDataBoundComponent<TItem>.PrevPageLabel

PagedDataBoundComponent<TItem>.PrevPageTitle

PagedDataBoundComponent<TItem>.PrevPageAriaLabel

PagedDataBoundComponent<TItem>.LastPageTitle

PagedDataBoundComponent<TItem>.LastPageAriaLabel

PagedDataBoundComponent<TItem>.NextPageLabel

PagedDataBoundComponent<TItem>.NextPageTitle

PagedDataBoundComponent<TItem>.NextPageAriaLabel

PagedDataBoundComponent<TItem>.PageTitleFormat

PagedDataBoundComponent<TItem>.PageAriaLabelFormat

PagedDataBoundComponent<TItem>.PagedView

PagedDataBoundComponent<TItem>.View

PagedDataBoundComponent<TItem>.LoadData

PagedDataBoundComponent<TItem>.Page

PagedDataBoundComponent<TItem>.skip

PagedDataBoundComponent<TItem>.topPager

PagedDataBoundComponent<TItem>.bottomPager

RadzenComponent.OnMouseEnter

RadzenComponent.OnMouseLeave

RadzenComponent.OnContextMenu

RadzenComponent.GetCssClass

RadzenComponent.GetId

RadzenComponent.Debounce

RadzenComponent.OnInitialized

RadzenComponent.RaiseContextMenu

RadzenComponent.RaiseMouseEnter

RadzenComponent.AddContextMenu

RadzenComponent.RaiseMouseLeave

RadzenComponent.OnBecameInvisible

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync

ComponentBase.OnParametersSet

ComponentBase.StateHasChanged

ComponentBase.ShouldRender

ComponentBase.OnAfterRender

ComponentBase.InvokeAsync

ComponentBase.DispatchExceptionAsync

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenDataList<TItem> : PagedDataBoundComponent<TItem>, IComponent, IHandleEvent, IHandleAfterRender

Type Parameters

Name Description
TItemThe type of data items in the list. Each item is rendered using the Template.

Examples

Basic data list with card template:

<RadzenDataList Data=@products TItem="Product" AllowPaging="true" PageSize="12">
    <Template Context="product">
        <RadzenCard Style="width: 250px; margin: 1rem;">
            <RadzenImage Path=@product.ImageUrl Style="width: 100%;" />
            <RadzenText TextStyle="TextStyle.H6">@product.Name</RadzenText>
            <RadzenText>@product.Price.ToString("C")</RadzenText>
        </RadzenCard>
    </Template>
</RadzenDataList>

Data list with empty state:

<RadzenDataList Data=@items TItem="Item" WrapItems="true" ShowEmptyMessage="true" EmptyText="No items found">
    <Template Context="item">
        <div class="item-card">@item.Name</div>
    </Template>
</RadzenDataList>

Constructors

RadzenDataList<TItem>link

A data list component for displaying collections of items using custom templates, with support for paging and virtualization. RadzenDataList provides a flexible way to render data in cards, tiles, or custom layouts instead of traditional table rows. Ideal when you need more control over item presentation than a traditional table provides. Perfect for product catalogs, image galleries, card-based dashboards, or any non-tabular data display. Supports complete control over item rendering via Template parameter, built-in paging with configurable page size, item wrapping to multiple columns/rows based on container width, efficient rendering for large datasets via virtualization, customizable message or template for empty state when no data exists, and on-demand data loading for server-side paging via LoadData. Use Template to define how each item should be rendered. The template receives the item as @context. Combine with RadzenRow/RadzenColumn for grid-based layouts or RadzenCard for card designs.

Declaration
public RadzenDataList<TItem>()

Properties

AllowVirtualizationlink

Gets or sets whether the DataList uses virtualization to improve performance with large datasets. When enabled, only visible items are rendered in the DOM, significantly improving performance for long lists.

Declaration
public bool AllowVirtualization { get; set; }
Property Value
Type Description
boolGets or sets whether the DataList uses virtualization to improve performance with large datasets. When enabled, only visible items are rendered in the DOM, significantly improving performance for long lists.

EmptyTemplatelink

Gets or sets a custom template for rendering the empty state when the data source has no items. Takes precedence over EmptyText when both are set. Use this for rich empty states with images, icons, or action buttons.

Declaration
public RenderFragment EmptyTemplate { get; set; }
Property Value
Type Description
RenderFragmentGets or sets a custom template for rendering the empty state when the data source has no items. Takes precedence over EmptyText when both are set. Use this for rich empty states with images, icons, or action buttons.

EmptyTextlink

Gets or sets the text message displayed when the data source is empty. Only shown if ShowEmptyMessage is true and no EmptyTemplate is specified.

Declaration
public string EmptyText { get; set; }
Property Value
Type Description
stringGets or sets the text message displayed when the data source is empty. Only shown if ShowEmptyMessage is true and no EmptyTemplate is specified.

IsLoadinglink

Gets or sets a value indicating whether this instance loading indicator is shown.

Declaration
public bool IsLoading { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether this instance loading indicator is shown.

ShowEmptyMessagelink

Gets or sets whether to display an empty message when the data source has no items. Enable this to show EmptyText or EmptyTemplate when the list is empty, providing user feedback.

Declaration
public bool ShowEmptyMessage { get; set; }
Property Value
Type Description
boolGets or sets whether to display an empty message when the data source has no items. Enable this to show EmptyText or EmptyTemplate when the list is empty, providing user feedback.

Virtualizelink

Gets Virtualize component reference.

Declaration
public Virtualization.Virtualize<TItem> Virtualize { get; }
Property Value
Type Description
Virtualization.Virtualize<TItem>Gets Virtualize component reference.

WrapItemslink

Gets or sets whether items should wrap to multiple rows based on their width and the container size. When true, items flow horizontally and wrap like words in a paragraph. When false, items stack vertically.

Declaration
public bool WrapItems { get; set; }
Property Value
Type Description
boolGets or sets whether items should wrap to multiple rows based on their width and the container size. When true, items flow horizontally and wrap like words in a paragraph. When false, items stack vertically.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

Reloadlink

Reloads this instance.

Declaration
public override Task Reload()
Returns
Type Description
Task
An error has occurred. This app may no longer respond until reloaded. Reload 🗙