启用Virtualize的FluentDataGrid绑定ItemsProvider后不渲染数据

API 探路者

2026-6-12

问题

在Blazor Server项目中使用Microsoft.FluentUI.AspNetCore.Components.DataGrid，希望通过ItemsProvider和Virtualize="true"实现无限滚动与懒加载（避免一次性从后端获取全部数据）。

经调试确认ItemsProvider方法可正常从后端获取数据，且按规范返回GridItemsProviderResult.From(documents, 1000000)，但启用Virtualize后UI无数据渲染，关闭该属性则显示正常。

简化后的代码示例如下：

<div style="height: 600px; overflow-y: auto;">
    <FluentDataGrid TGridItem="TextDocumentSummary"
                    ItemsProvider="LoadDocumentsAsync"
                    Virtualize="true"
                    KeyField="Id"
                    ItemSize="60"
                    Style="width:100%;">
        <ChildContent>
            <PropertyColumn Title="Title" Property="@(c => c.Title)" />
            <PropertyColumn Title="Type" Property="@(c => c.Type)" />
        </ChildContent>
    </FluentDataGrid>
</div>

@code {
    private async ValueTask<GridItemsProviderResult<TextDocumentSummary>> LoadDocumentsAsync(
        GridItemsProviderRequest<TextDocumentSummary> request)
    {
        var offset = (int)request.StartIndex;
        var limit = request.Count ?? 10;
        var data = await _documentStore.GetDocumentsAsync(offset, limit);
        return GridItemsProviderResult.From(data, 1000000); // Total count is mocked for infinite scroll
    }
}

已尝试以下操作：

设置正确的容器高度与overflow-y: auto
调整ItemSize匹配行高（如54、60、80、100等）

环境信息：.NET9，Microsoft.FluentUI.AspNetCore.Components版本4.12.1

请问还需排查哪些配置或布局问题才能让Virtualize正常工作？这是否是已知Bug？

排查方向与解决方案建议

确认容器与DataGrid的高度约束有效性
父容器的height需为明确的像素值（或父级链都有明确高度的百分比），同时给DataGrid设置height: 100%，避免虚拟滚动容器无法计算可视区域范围。若DataGrid高度为auto，虚拟滚动的视口计算会失效。
验证KeyField的唯一性与稳定性
确保KeyField="Id"对应的TextDocumentSummary.Id是全局唯一值，且为不可变类型（如int、Guid）。虚拟滚动依赖唯一键跟踪行状态，键值重复或动态变化会导致渲染逻辑异常。
精确匹配ItemSize与实际行高
打开浏览器开发者工具，查看DataGrid行元素的实际总高度（包含padding、border、margin），将ItemSize设置为该精确值。如果行高因内容换行动态变化，虚拟滚动的滚动位置计算会出错，导致可视区域无数据渲染。
排查异步加载的状态同步问题
在Blazor Server中，异步操作需确保状态更新正确。可在LoadDocumentsAsync返回数据后，添加await InvokeAsync(StateHasChanged)（需避免循环更新），同时检查_documentStore.GetDocumentsAsync是否返回了符合request.Count数量的数据，空数据或数量不匹配会导致虚拟滚动无内容。
简化场景排除干扰因素
移除DataGrid的所有自定义样式、列模板，仅保留最基础的Virtualize、ItemsProvider配置，测试虚拟滚动是否生效。如果生效，再逐步添加样式和列，定位冲突点。
检查版本兼容性
.NET 9属于较新版本，FluentUI Blazor 4.12.1可能存在与.NET 9的兼容性问题。可尝试升级到最新版FluentUI Blazor组件，或降级到.NET 8测试是否能正常工作。

关于是否为已知Bug：当前该组件的官方仓库已有相关问题提交，建议关注组件版本更新，查看后续修复进展。

内容的提问来源于stack exchange，提问作者hanushi