DataList (Blazor)
This article demonstrates how to use the DataList component. Check also the component guide and API reference.
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 records. |
| PageSize | integer | 10 | DataList number of records per page. |
| AllowPaging | boolean | false | Is paging allowed. |
| WrapItems | boolean | false | Is item wrap allowed. |
| Visible | boolean/expression | true | Is DataList visible. |
| Template | string | null | DataList template. |
| CurrentPage | integer | 0 | Returns current page index. |
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.