DataList component
This article demonstrates how to use the DataList component.
Data-binding
To display data in DataList component you need to set collection of items (IEnumerable<>
) to Data
property. DataGrid component can perform server-side paging when bound to IQueryable or using LoadData
event.
Populate data when initialized
@inject NorthwindContext dbContext
<RadzenDataList WrapItems="true" AllowPaging="true" Data="@orders" TItem="Order">
<Template Context="order">
<div>Company:</div>
<b>@order.Customer?.CompanyName</b>
</Template>
</RadzenDataList>
@code {
IEnumerable<Order> orders;
protected override void OnInitialized()
{
orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
}
}
Populate data on demand using LoadData event.
@using System.Linq.Dynamic.Core
@inject NorthwindContext dbContext
<RadzenDataList WrapItems="true" AllowPaging="true" Data="@orders" Count="@count" TItem="Order" LoadData="@LoadData">
<Template Context="order">
<div>Company:</div>
<b>@order.Customer?.CompanyName</b>
</Template>
</RadzenDataList>
@code {
IEnumerable<Customer> customers;
int count;
void LoadData(LoadDataArgs args)
{
// This demo is using https://dynamic-linq.net
var query = dbContext.Customers.AsQueryable();
count = query.Count();
// Perform paging via Skip and Take.
customers = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
}
}