radzen-blazor/RadzenBlazorDemos/Pages/DataListLoadData.razor

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inject NorthwindODataService service


<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-2">
    <RadzenCheckBox @bind-Value="@allowVirtualization" Name="allowVirtualization"  />
    <RadzenLabel Text="Allow virtualization" Component="allowVirtualization" />
</RadzenStack>

<RadzenDataList AllowVirtualization=@allowVirtualization Style="@(allowVirtualization ? "height:400px;overflow:auto;" : "")" 
                WrapItems="@(!allowVirtualization)" AllowPaging="@(!allowVirtualization)" IsLoading=@isLoading LoadData=@LoadData
                Data="@products" Count=@count TItem="Product" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
    <Template Context="product">
        <RadzenCard Variant="Variant.Outlined" class="rz-p-0" Style="width: 100%; overflow: hidden;">
            <RadzenRow Gap="0">
                <RadzenColumn Size="12" SizeLG="3" class="rz-p-4 product-title">
                    <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H5" class="rz-color-on-secondary-lighter">@(product.ProductName)</RadzenText>
                </RadzenColumn>
                <RadzenColumn Size="12" SizeLG="7" class="rz-p-4">
                    <RadzenRow Gap="0">
                        <RadzenColumn Size="12" SizeMD="6" SizeLG="2">
                            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H5" class="rz-mb-0">In Stock</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body2">@(product.UnitsInStock)</RadzenText>
                        </RadzenColumn>
                        <RadzenColumn Size="12" SizeMD="6" SizeLG="2">
                            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H5" class="rz-mb-0">Origin</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body2">@(product.Supplier?.Country)</RadzenText>
                        </RadzenColumn>
                        <RadzenColumn Size="12" SizeMD="6" SizeLG="5">
                            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H5" class="rz-mb-0">Sold by</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body2">@(product.Supplier?.CompanyName)</RadzenText>
                        </RadzenColumn>
                        <RadzenColumn Size="12" SizeMD="6" SizeLG="3" class="rz-text-align-start rz-text-align-lg-end">
                            <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Shade="Shade.Lighter" class="price-badge" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", product.UnitPrice)}") />
                        </RadzenColumn>
                    </RadzenRow>
                </RadzenColumn>
                <RadzenColumn Size="12" SizeLG="2" class="rz-p-4">
                    <RadzenButton Text="Order now" Style="width: 100%" />
                </RadzenColumn>
            </RadzenRow>
        </RadzenCard>
    </Template>
</RadzenDataList>

<style>
.product-title {
    min-height: 72px;
    background-color: var(--rz-secondary-lighter);
}
.price-badge {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    padding: 8px;
}
</style>

@code {
    bool allowVirtualization;
    int count;
    bool isLoading;

    IEnumerable<Product> products;

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;

        var result = await service.GetProducts(top: args.Top, skip: args.Skip, count: true);
        // Update the Data property
        products = result.Value.AsODataEnumerable();
        // Update the count
        count = result.Count;

        isLoading = false;
    }
}