FluentDataGrid with Virtualize="true" not rendering data even though ItemsProvider is returning results

I'm using Microsoft.FluentUI.AspNetCore.Components.DataGrid in a Blazor Server project. I want to use infinite scrolling with ItemsProvider and Virtualize="true".

I'm using ItemsProvider parameter instead of Items parameter because I don't want to fetch all the data from the Backend. I want lazy laoding.

The ItemsProvider method is working correctly. I see the data being fetched from the backend (confirmed via console logs and debugger), and I return GridItemsProviderResult.From(documents, 1000000) as recommended.

However, no data appears in the UI when Virtualize is enabled.

Here’s the simplified setup:

<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>

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
}

If I remove Virtualize="true", the data renders just fine.

I’ve tried:

• Setting correct height + overflow-y: auto

• Matching ItemSize to row height - Different values e.g.: 54, 60,80,100

What else should I check to make virtualization work properly in FluentDataGrid with an ItemsProvider?

Is this a known bug or something I'm missing in layout/setup?

I'm using .net9, Microsoft.FluentUI.AspNetCore.Components Version="4.12.1"

I have added this issue in GitHub as well https://github.com/microsoft/fluentui-blazor/issues/4059

After adding @rendermode InteractiveServer, the data now loads properly with virtualization and scrolling.
Explanation:
Virtualization requires interactivity between the client and server. Without explicitly setting the render mode, Blazor renders the component as static HTML (non-interactive). By using @rendermode InteractiveServer, the component is rendered as an interactive server-side Blazor component, which supports virtualization and dynamic data loading.

Hope this helps someone else facing the same issue!