# 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.

Namespace: [Radzen.Blazor](https://blazor.radzen.com/docs/api/Radzen.Blazor.md)

Assembly: Radzen.Blazor.dll

## Inheritance

- Object
- ComponentBase
- [RadzenComponent](https://blazor.radzen.com/docs/api/Radzen.RadzenComponent.md)
- [PagedDataBoundComponent<TItem>](https://blazor.radzen.com/docs/api/Radzen.PagedDataBoundComponent-1.md)
- RadzenDataList<TItem>

## Implements

- IComponent
- IHandleEvent
- IHandleAfterRender

## Syntax

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

## 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:

```razor
<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:

```razor
<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

| Constructor | Description |
|-------------|-------------|
| `public 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. |

## Properties

| Property | Type | Description |
|------|------|-------------|
| AllowVirtualization | `bool` | 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. |
| EmptyTemplate | `RenderFragment` | 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. |
| EmptyText | `string` | Gets or sets the text message displayed when the data source is empty. Only shown if ShowEmptyMessage is true and no EmptyTemplate is specified. |
| IsLoading | `bool` | Gets or sets a value indicating whether this instance loading indicator is shown. |
| ShowEmptyMessage | `bool` | 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. |
| Virtualize | `Virtualization.Virtualize<TItem>` | Gets Virtualize component reference. |
| WrapItems | `bool` | 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. |

## Methods

| Method | Returns | Description |
|------|---------|-------------|
| `BuildRenderTree(Rendering.RenderTreeBuilder __builder)` | `void` |  |
| `GetComponentCssClass()` | `string` |  |
| `Reload()` | `Task` | Reloads this instance. |

## Inherited Members

- From [PagedDataBoundComponent<TItem>](https://blazor.radzen.com/docs/api/Radzen.PagedDataBoundComponent-1.md): AllowPaging, CalculatePager, Count, CurrentPage, Data, Density, Dispose, FirstPage, FirstPageAriaLabel, FirstPageTitle, GoToPage, LastPage, LastPageAriaLabel, LastPageTitle, LoadData, LoadingTemplate, NextPage, NextPageAriaLabel, NextPageLabel, NextPageTitle, OnAfterRenderAsync, OnCollectionChanged, OnDataChanged, OnPageChanged, OnPageSizeChanged, OnParametersSetAsync, Page, PageAriaLabelFormat, PageNumbersCount, PageSize, PageSizeOptions, PageSizeText, PageTitleFormat, PagedView, PagerAlwaysVisible, PagerHorizontalAlign, PagerInputSize, PagerPosition, PagingSummaryFormat, PagingSummaryTemplate, PrevPage, PrevPageAriaLabel, PrevPageLabel, PrevPageTitle, SetParametersAsync, ShowPagingSummary, Template, View, bottomPager, skip, topPager
- From [RadzenComponent](https://blazor.radzen.com/docs/api/Radzen.RadzenComponent.md): AddContextMenu, Attributes, ContextMenu, Culture, CurrentStyle, Debounce, DefaultCulture, DefaultUICulture, Element, GetCssClass, GetId, GetIdAttribute, IsJSRuntimeAvailable, JSRuntime, Localize, MouseEnter, MouseLeave, OnBecameInvisible, OnContextMenu, OnInitialized, OnMouseEnter, OnMouseLeave, RaiseContextMenu, RaiseMouseEnter, RaiseMouseLeave, Reference, Style, UICulture, UniqueID, Visible
- From ComponentBase: Assets, AssignedRenderMode, DispatchExceptionAsync, InvokeAsync, OnAfterRender, OnInitializedAsync, OnParametersSet, RendererInfo, ShouldRender, StateHasChanged