DataList

This guide demonstrates how to use the DataList component.

DataList Properties

Name Type Default Description
Name string ‘datalist’ + index suffix Unique name of the DataList.
TItem type null Item type.
Data array null DataList data.
Count integer null DataList number of all recorcds.
PageSize integer 10 DataList number of recorcds per page.
AllowPaging boolean false Is paging allowed.
WrapItems boolean false Is item wrap allowed.
Visible boolean/expression true Is DataList visible.
EmptyText string No records to display. DataList text on no records.
Template string null DataList template.

DataList Events

Name Type Default Description
LoadData event null Load data event of the DataList raised on paging with info about the current page and page size

Customizing the DataList template

By default the DataList component displays the index of the current row as template. Use the Template property to customize the appearance. The whole data item is available as data in the expression.

Template examples:

  • <strong>${data.FirstName}</strong> - display the FirstName property in a <strong></strong> element.
  • <strong>@(data.FirstName)</strong> - display the FirstName property in a <strong></strong> element.
  • Full Name: ${data.FirstName} ${data.LastName} - display two data item properties in the column.
  • Full Name: @(data.FirstName) @(data.LastName) - display two data item properties in the column.

Important: The ${} syntax is specific to Radzen. If you are using the Radzen Blazor components outside of Radzen you have to use the @() syntax.

Blazor declaration

  <RadzenDataList WrapItems="true" AllowPaging="true" Data="@orders" TItem="Order">
    <Template Context="order">
      <RadzenCard Style="width:300px;">
        <div class="row">
          <div class="col-md-6">
            <div>Company:</div>
            <b>@order.Customer?.CompanyName</b>
            <div style="margin-top:20px">Employee:</div>
            <b>@(order.Employee?.FirstName + " " + order.Employee?.LastName)</b>
            <br />
            <RadzenImage Path="@order.Employee?.Photo" Style="width:100px;" />
          </div>
          <div class="col-md-6">
            <div>Freight:</div>
            <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)</b>
            <div style="margin-top:20px">Ship country:</div>
            <b>@(order.ShipCountry)</b>
            <div style="margin-top:20px">Ship city:</div>
            <b>@(order.ShipCity)</b>
            <div style="margin-top:20px">Ship name:</div>
            <b>@(order.ShipName)</b>
          </div>
        </div>
      </RadzenCard>
    </Template>
  </RadzenDataList>

Server-side paging

  • DataList component can perform server-side paging when bound to IQueryable (default) or using LoadData event. When generating pages from database, Radzen will create automatically IQueryable service and will set Data property for the DataList component.

  • For paging with LoadData event enable paging, add LoadData event handler, call your service with provided information in the event argument and set Data and Count properties to returned values.

We are here for you

Making our users happy is always a priority for us.