I'm trying to use Virtualize.EmptyContent with Radzen's DataList but perhaps that is not possible with the current DataList implementation?
The EmptyContent shows the RenderFragment for when no data is available.
I'm trying to use the example shown here, with RadzenDataList, but don't think it's currently possible.
No, you cannot use Virtualize.EmptyContent, you can however use DataList EmptyTemplate:
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inherits DbContextPage
<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)" ShowEmptyMessage
Data="@products" TItem="Product" PageSize="5" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
<EmptyTemplate>No records</EmptyTemplate>
<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;
IQueryable<Product> products;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
products = dbContext.Products.Include("Category").Include("Supplier").Take(0);
}
}
Thanks, Enchev. My bad for not reading the docs.
Both ShowEmptyMessage and EmptyTemplate are described there.
Thank you for the guidance!
