Blazor Virtualize won't load more items

Question

I have a WASM Blazor app with a simple Virtualize items that use ItemsProvider to get the items:

<Virtualize Context="bobina" ItemSize="500" ItemsProvider="@GetCustomersProvider" OverscanCount="0">

this is the method:

private async ValueTask<ItemsProviderResult<Bobina>> GetCustomersProvider(ItemsProviderRequest request)
    {
        List<Bobina> lista = await Bobina.GetLista(request.StartIndex, request.Count);
        return new ItemsProviderResult<Bobina>(lista, lista.Count());
    }

the Bobina.GetLista performs an http call to an harperDB and get some records:

$"SELECT * FROM dev.bobine order by nome offset {skip} rows FETCH NEXT {take} ROWS ONLY";

For test purpose I have set the ItemSize to 500px, so the method load only few items (inside the db there are only 7 items).

When the first call is done the Virtualize component renders some items but when I scroll down the page nothing happens.

It's supposed to call the server again to fetch some others records, but it doesn't do.

I have seen many online sample that do the same things I do and all works fine. I use the mudblazor componets, so I thought to comment all these components and render a simple <table> tag, but the result is the same.

Where am i wrong? How can I resolve this issue?

Here the full code sample.

Answer 1

The 'Virtualize' component needs to know the total number of items available to determine when it should fetch additional items as the user scrolls.

I think the second parameter of the ItemsProviderResult constructor should be the total number of items available, not the count of items in the current fetched list.

private async ValueTask<ItemsProviderResult<Bobina>> GetCustomersProvider(ItemsProviderRequest request)
{
    List<Bobina> lista = await Bobina.GetLista(request.StartIndex, request.Count);
    int totalItemCount = await Bobina.GetTotalItemCount(); // Add a method to get the total number of items in the database
    return new ItemsProviderResult<Bobina>(lista, totalItemCount);
}

And then:

public static async Task<int> GetTotalItemCount()
{
    // Implement the logic to query the total number of items in the database
    // Example: "SELECT COUNT(*) FROM dev.bobine"
}