FluentDataGrid scroll up/scroll down does not show the correct number of records

[andrewwang1tw]

FluentDataGrid,

The scenario is using the remote data via "ItemProvider" and retrieves all data in the database table (17 records, total)

There are 17 records and I can scroll down to the 17th record, below

Then immediately it changes to only show up the last 15 records, no matter how I scroll down to the bottom of the FluentDataGtrid, it still only shows up to the last 15th record.

Because there are 2 empty records on the top of the FluentDataGrid. I can see the 2 empty records if I scroll up very QUICKLY to the top of the FluentDataGrid. And immediately the 2 empty records disappeared.

If I change the "style="height: 400px" from 400px to 500px, then I can scroll down to see the 16th record.

If I change to 600px, then I can scroll down to see the 17th record.

<div style="height: 400px; overflow:auto;" tabindex="-1">
    <FluentDataGrid @ref="myGrid"
        ItemsProvider="provider" 
        TGridItem="ProductItemDto"
        ItemSize="60"
        Loading="true" 
        Virtualize="true" 
        ShowHover="true"         
        ResizableColumns=true 
        ResizeType="DataGridResizeType.Exact"
        GenerateHeader="GenerateHeaderOption.Sticky">

[andrewwang1tw]

OK, I know what happened.

I have to use the req.StartIndex and req.Count and send them as the query parameter of the remote data (web api) to IQueryable.skip() and IQueryable.take() the data.

But in the beginning, the req.Count will be NULL.

        provider = async req =>
        {
            var skip = req.StartIndex;
            var limit = req.Count ?? 20;

            var urlString = "https://localhost:7069/api/ProductItems?skip=" + skip + "&limit=" + limit;

            var response = await Http.GetAsync(urlString);