Use "SetLoadingState" to set Loading state to TRUE, seems to trigger the "ItemProvider" to be executed again

[andrewwang1tw]

As the title, FluentDataGrid

Below code, already comment out the call to web API to retrieve remote data

                <TemplateColumn Title="Actions" Align="@Align.Center" Width="10%">
                    <FluentButton aria-label="Edit item"
                                  IconEnd="@(new Icons.Regular.Size16.Edit())"
                                  OnClick="@(async () => {                                        
                                        myGrid!.SetLoadingState(true);

                                        await Task.Delay(3000);
                                        //await updateProductList(); // Web API to retrieve remote data

                                        myGrid!.SetLoadingState(false);
                                  })" />

But I can still see the HTTP get action, it's an interesting behavior.

If comment out the myGrid!.SetLoadingState(true);

//myGrid!.SetLoadingState(true);

Then nothing happened.

[vnbaaij]

This is expected behavior and has do do with the way the DataGrid (based on QuickGrid code) collects data.
QuickGrid is using ChildContent as a way of collecting the list of columns. The assumption is therefore it's free to render that as often as it wants. In order to discover when columns are added/removed (which happens when you set the loading state), it has to be able to invoke ChildContent on each render and because of that it will try to get the data.

[andrewwang1tw]

I try to understand the behavior but so far still struggle with it. As a Fluent beginner, after reading the FluentDataGrid examples, "Remote Data" and "Virtualized grid", it confused me.

[Remote Data - "Loading=true" in the grid ]
The "Remote Data" example sets "Loading=true" in the grid, and if you click on the "edit" or "delete" button, the grid continues loading and never ends. Even using "setLoadingState(false)", it continues "Loading". I think it's because of the "Loading=true" in the grid.

Even though there is no code in the "edit or delete" button handler, once clicking on it, the grid begins to "Loading" continuously, all because of the "Loading=true" setting in the grid. And no way to stop it.

[Virtualized grid - no "Loading=true" in the grid]
Then the "Virtualized grid" example seems to solve the continuous "Loading" by not setting "Loading=true" in the grid. The price is we will not have the "LoadingContent" effect except if you use the "setLoadingState(true)" manually. And if using "LoadingContent" to show the loading effect, you need to use Task.Delay() to let it show up.

If after clicking the "edit or delete" button, you need to update the grid data you use "SetLoadingState(true)" to do that. And no need to call your web API after "SetLoadingState(true)".

If there are more details about Loading and SetLoadingSate() in the documentation, HELPS.

Another interesting thing is in the "OnInitializedAsync" I call the web API to retrieve data once. But from the "Output Window", it is executed twice.

[vnbaaij]

I try to understand the behavior but so far still struggle with it. As a Fluent beginner, after reading the FluentDataGrid examples, "Remote Data" and "Virtualized grid", it confused me.

I don't have time to go into this too deep now, but remote data and virtualize are two separate things.

[Remote Data - "Loading=true" in the grid ]
The "Remote Data" example sets "Loading=true" in the grid, and if you click on the "edit" or "delete" button, the grid continues loading and never ends. Even using "setLoadingState(false)", it continues "Loading". I think it's because of the "Loading=true" in the grid.

We need to look at that.

Even though there is no code in the "edit or delete" button handler, once clicking on it, the grid begins to "Loading" continuously, all because of the "Loading=true" setting in the grid.

[Virtualized grid - no "Loading=true" in the grid]
Then the "Virtualized grid" example seems to solve the continuous "Loading" by not setting "Loading=true" in the grid. The price is we will not have the "LoadingContent" effect except if you use the "setLoadingState(true)" manually. And if using "LoadingContent" to show the loading effect, you need to use Task.Delay() to let it show up.

If after clicking the "edit or delete" button, you need to update the grid data you use "SetLoadingState(true)" to do that. And no need to call your web API after "SetLoadingState(true)".

Another interesting thing is in the "OnInitializedAsync" I call the web API to retrieve data once. But from the "Output Window", it is executed twice.

This is what I just explained in my previous reply. The grid can load the data multiple times.

[andrewwang1tw]

Yes, I know "remote data" and "virtualize grid" are two separate things. Both examples use Virtualize="true", and I am concerned about the "Loading" setting in the grid. The below 3 situations have 3 different behaviors and option "3" seems the more reasonable.

Option 1. <FluentDataGrid Loading="true" ...
This is the same with the "remote data" example, and clicking on the "edit or delete" button results in endless continuous "Loading". The "Loading" state is always true, even "SetLoadingState(false)" cannot change it.

Option 2. <FluentDataGrid Loading="false" ...
Under this scenario, the call to "SetLoadingState(true)" will not trigger the "ItemProvider" to be executed. You have to call your web API. And due to the Loading="false", there is no "LoadingContent" effect even if you call the "SetLoadingState(true)" manually. The Loading state of the grid is always "false". You can never change it again.

Option 3. <FluentDataGrid ...
This is the same with the "Virtualize grid" example, there is no "Loading" state set in the grid. If you want the "LoadingContent" effect, use SetLoadingState(true) and Task.Delay(). SetLoadingState(true) will also trigger the ItemProvider again, no need to call the web API, or "RefreshDataAsync()". Finally, call SetLoadingState(false) to set the Loading state to false or it will in endless continuous "Loading.

But there is a problem in option 3, you cannot call "SetLoadingState(true)" in "OnInitializedAsync" before the web API call, the gird is null now, which results in no "LoadingContent" effect when the component shows up the first time.

My Finding
Once you set Loading="true" or Loading="false" in the grid, it will never change "Loading" state again even via "SetLoadingState(true or false)". That's why Option 1 will keep continuously "Loading" and Option 2 has no "LoadingContent" effect.

BTW, no hurry, and thanks for your reply.