Data Grid with Virtualize and ItemsProvider causes double loading of data set

[StephenOTT]

Using latest release.

If you create a data grid with a ItemsProvider and virtualize = true, it causes double requests of the underlying provider.

Taking the code for Remote:

https://www.fluentui-blazor.net/DataGrid#remotedata

and setting virtualized seems to cause the code GridItemsProvider to be called twice.

Is virtualize and ItemsProvider supposed to work together? or must code similar to the manual code for Items in the Virtualized section be used?

[vnbaaij]

Hi,
While we recognize this might be a valid issue, there are no reprodcution steps provided. We have too much things going on to completely start from the top with every issue we receive.
As you are raising in issue (which we appreciate!), you clearly have an interest in making the library better for everyone. Please help us doing that by creating a clear and complete reproduction scenario. If needed, accompanied with a ready to run repository. Thanks!

[StephenOTT]

@vnbaaij in general should itemsProvider work with virtualize with a single api call in initial load? If yes, I am happy to provide a reproducer

[vnbaaij]

I really don't know that from the top of my head. Would need to dive into the code for that. But it is working and used together in the sample you mentioned.
I'm assuming you have tried it locally? If so, was that on Client or Server project?
If server, than it might just be a case of prerendering taking place and the mehod is called twice because of that.
If client, let me know where in the sample I need to put a breakpoint to see it happen. I tried to set one on line 32 in DataGridRemoteData.razor but only saw that one being called once

[StephenOTT]

Understood. Will setup a reproducer for you.

[vnbaaij]

Closing due to inactivity. Can be re-opened once reproduction is available.

[diego81b]

Hi,
i have the same problem so i take a look on code and at first glance, the problem seems to be that the SetParametersAsync method on ColumnsCollectedNotifier is invoked, which in turn invokes RefreshDataCoreAsync, but at that moment _virtualizeComponent (which should contain the reference to Virtualize) is not initialised.

As I understand it, the reference set occurs on OnAfterRenderAsync and that is when the second refresh is triggered as soon as Virtualize component is rendered.

I will try to investigate further but at the moment i didn't find a solution

[StephenOTT]

Snippet to reproduce the error:

<FluentDataGrid Virtualize="true" ItemSize="120" OnRowFocus="HandleRowClick" TGridItem="Person" ItemsProvider="PeopleData">
                <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
                <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
                <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</FluentDataGrid>

@code {

    private GridItemsProvider<Workspace>? _workspaces;
    bool _isItemsLoaded;

    record Person(int PersonId, string Name, DateOnly BirthDate);

    List<Person> people =
    [
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9))
    ];

    GridItemsProvider<Person>? PeopleData;
    
    protected override Task OnInitializedAsync()
    {
        PeopleData = async req =>
        {
            Console.WriteLine("Data Gathered!");
            return GridItemsProviderResult.From(
                items: people,
                totalItemCount: people.Count());
        };
    }
}

You will see "Data Gathered" run twice on page load

[vnbaaij]

FluentDataGrid is based on QuickGrid. Since QuickGrid is using ChildContent as a way of collecting the list of columns, the assumption is it's free to render that as often as it wants.
In order to discover when columns are added/removed, it has to be able to invoke ChildContent on each render. Because of this, it is possible that you will see your message printed twice.

[StephenOTT]

@vnbaaij but in practice a result of the data grid provider would be through the calling of a http client, and so api call is made twice on grid load.

How can we prevent the double call of the http client when being used within the grid data provider?

[vnbaaij]

You would need to solve that on either the API side (if possible) or create something in between the OnInitialized and the request to the griditemsproviderresult

[StephenOTT]

Can we leave this open or transfer into a discussion then ? @vnbaaij

This double load behaviour occurs only with the virtualized impl and really acts/feels like a bug to users.

one must imagine that double loading is not the intended behaviour of quick grid and its implementations.

[StephenOTT]

@vnbaaij thanks for moving this.