Class RadzenDataList<TItem>

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>
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
[CascadingTypeParameter("TItem")]
public class RadzenDataList<TItem> : PagedDataBoundComponent<TItem>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Type Parameters
Name Description
TItem

The 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()

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()
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>

Properties

AllowVirtualization

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
[Parameter]
public bool AllowVirtualization { get; set; }
Property Value
Type Description
bool

true to enable virtualization; false for standard rendering. Default is false.

EmptyTemplate

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
[Parameter]
public RenderFragment EmptyTemplate { get; set; }
Property Value
Type Description
RenderFragment

The empty state template render fragment.

EmptyText

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
[Parameter]
public string EmptyText { get; set; }
Property Value
Type Description
string

The empty state message text. Default is "No records to display."

IsLoading

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

Declaration
[Parameter]
public bool IsLoading { get; set; }
Property Value
Type Description
bool

true if this instance loading indicator is shown; otherwise, false.

ShowEmptyMessage

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
[Parameter]
public bool ShowEmptyMessage { get; set; }
Property Value
Type Description
bool

true to show empty message; false to show nothing. Default is false.

Virtualize

Gets Virtualize component reference.

Declaration
public Virtualize<TItem> Virtualize { get; }
Property Value
Type Description
Virtualize<TItem>

WrapItems

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
[Parameter]
public bool WrapItems { get; set; }
Property Value
Type Description
bool

true to enable wrapping (horizontal flow); false for vertical stacking. Default is false.

Methods

BuildRenderTree(RenderTreeBuilder)

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
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

GetComponentCssClass()

Gets the component CSS class.

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
Overrides

Reload()

Reloads this instance.

Declaration
public override Task Reload()
Returns
Type Description
Task
Overrides

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now