[DataGrid] Asynchronous IQueryable based loading and error handling UI feedback

[Miguel Hasse de Oliveira (miguelhasse)]

Pull Request

📖 Description

This feature introduces two visual enhancements to the DataGrid component while asynchronously loading items from an IQueryable data source:

1. The 'Loading' state flag is always set to true when requesting items on first time load (or while no items have yet been loaded) providing better visual feedback for users (avoiding empty item messages before loading).
2. Exceptions that occur when asynchronously requesting items can the caught, depending on the filter parameter 'HandleLoadingError', and displayed in the body of the DataGrid. The exception error rendering can be customized using 'ErrorContent' template.

👩‍💻 Reviewer Notes

A working sample of the 'Loading' state flag feature can be seen in the following samples:

• https://github.com/miguelhasse/fluentui-blazor/tree/adventureworks-server-sample/examples/AdventureWorks
• https://github.com/miguelhasse/fluentui-blazor/tree/adventureworks-server-sample/examples/TripPin

These same samples can be used to see a working sample for the error handling feature by forcing data source connection errors.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

[Vincent Baaij (vnbaaij)]

The FluentDataGrid_With_Empty_Items_Stays_Loading_Until_Changed test is failing with this PR applied.

We cannot just alter the test to make it pass with the new code. That would mean we introduce a breaking change (albeit a small one)

Before (our code):

After (your PR code):

Please review the PR and make the necessary changes so all tests pass unaltered. Thanks

[Miguel Hasse de Oliveira (miguelhasse)]

Vincent Baaij (@vnbaaij) I'll check the failing unit test and apply required fixes. Thanks

[Vincent Baaij (vnbaaij)]

Miguel Hasse de Oliveira (@miguelhasse) now there are 3 failed Unit Tests...

Use this code in the IssueTester to verify the result with current version:

<FluentDataGrid @ref="Grid" Items="@Items.AsQueryable()" Loading="loading">
	<EmptyContent><p id="empty-content">empty content</p></EmptyContent>
	<LoadingContent><p id="loading-content">loading content</p></LoadingContent>
	<ChildContent>
		<PropertyColumn Property="@(i => i.Name)" />
	</ChildContent>
</FluentDataGrid>

<br />
<FluentButton OnClick="ToggleLoading">Toggle Loading</FluentButton>

@code {
	private FluentDataGrid<Customer> Grid { get; set; } = null!;
	private bool loading = true;
	private IEnumerable<Customer> Items = Array.Empty<Customer>();

	// Sample data...
	private IEnumerable<Customer> GetCustomers()
	{
		yield return new Customer(1, "Denis Voituron");
		yield return new Customer(2, "Vincent Baaij");
		yield return new Customer(3, "Bill Gates");
	}

	private record Customer(int Id, string Name);

	private async Task ToggleLoading()
	{
		// up untill now it shows loading content
		loading = false;

		// now it shows empty content

		await Task.Delay(2000);
		Items = GetCustomers();
		// now it shows data
	}
}

[Denis Voituron (dvoituron)]

Vincent Baaij (@vnbaaij) Could this new feature be added to v5?