From 8a3f61ab160c1f1acd823666dd8bd905e055b075 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:41:10 +0200 Subject: [PATCH 1/4] docs(grid): Revamp Grid Loading animation article --- components/grid/loading-animation.md | 99 +++++++++++++++++++--------- 1 file changed, 69 insertions(+), 30 deletions(-) diff --git a/components/grid/loading-animation.md b/components/grid/loading-animation.md index 18f1dd3d16..a9b81b7ff5 100644 --- a/components/grid/loading-animation.md +++ b/components/grid/loading-animation.md @@ -10,66 +10,105 @@ position: 90 # Loading Animation -The loading animation indicates a data operation that requires more than 600ms to complete. The indicator appears as a loading sign over the Blazor Data Grid. The loading animation improves user experience with a visual hint that the requested action is still executing. The feature can prevent repetitive user actions. +The Grid can show a loading animation to indicate data operations that take more than 600ms to complete. The indicator appears as a loading sign over the Blazor Data Grid. The loading animation improves user experience with a visual hint that the requested action is still executing. The feature can prevent repetitive user actions. -The data operations that trigger the loading animation include: +## Basics + +The Grid `EnableLoaderContainer` parameter determines if the component will show a built-in LoaderContainer for long operations. The loading animation is enabled by detault. The data operations that trigger the loading animation include: * [Paging]({%slug components/grid/features/paging%}) * [Filtering]({%slug components/grid/filtering%}) * [Sorting]({%slug components/grid/features/sorting%}) * [Grouping]({%slug components/grid/features/grouping%}) * [Expanding groups with load-on-demand]({%slug grid-group-lod%}) -* [Editing]({%slug components/grid/editing/overview%}) -* [Inserting]({%slug components/grid/editing/overview%}) -* [Deleting records]({%slug components/grid/editing/overview%}) +* [Creating, deleting or editing records]({%slug components/grid/editing/overview%}) + +## Show LoaderContainer on Initial Load + +The Grid will not display a loading animation during its initial rendering and data load. The component cannot know when or even if data will be provided to it, especially when using the Grid `Data` parameter. Initial automatic loading sign can either show indefinitely, or it could prevent the user from altering any saved Grid state (such as changing filters). If you want to display a loading animation on initial load, you can use a [LoaderContainer component]({%slug loadercontainer-overview%}). See the example below or the [Grid Loading Animation Live Demo](https://demos.telerik.com/blazor-ui/grid/loading-animation). -The Grid will not display a loading animation during its initial rendering. The component cannot know when or even if data will be provided to it. Initial automatic loading sign can either show indefinitely, or it could prevent the user from altering any saved Grid state (such as changing filters). If you want a loading animation on the initial load, you can use a [LoaderContainer component]({%slug loadercontainer-overview%}#basic-loadercontainer). See the [Grid Loading Animation Live Demo](https://demos.telerik.com/blazor-ui/grid/loading-animation). +## Example ->caption Grid Loading Animation +The following example binds the Grid with an [`OnRead` event handler]({%slug common-features-data-binding-onread%}). To show an external initial [LoaderContainer over the Grid]({%slug loadercontainer-overview%}#fill-a-parent-container) when using the `Data` parameter, you can control the LoaderContainer's rendering or visibility, depending on whether the data collection is null. + +>caption Using an external and the built-in Grid loading animation ````CSHTML @using Telerik.DataSource @using Telerik.DataSource.Extensions -

- - - - - - +

+ +
+ @* + This LoaderContainer is used only during initial data load. + The position:relative style on the parent DIV makes the LoaderContainer cover only the Grid. + The LoaderContainer configuration and Template matches the built-in Grid loading animation. + *@ + + + + + + + + + + + +
@code { - List AllData { get; set; } - bool ShowLoading { get; set; } = true; + private List GridData { get; set; } = new(); - async Task GetData(GridReadEventArgs args) + private bool EnableGridLoaderContainer { get; set; } = true; + private bool LoaderContainerVisible { get; set; } = true; + + private async Task OnGridRead(GridReadEventArgs args) { + // Simulate network delay. await Task.Delay(2000); - DataSourceResult result = AllData.ToDataSourceResult(args.Request); + + DataSourceResult result = await GridData.ToDataSourceResultAsync(args.Request); + args.Data = result.Data; args.Total = result.Total; + args.AggregateResults = result.AggregateResults; + + // Hide the initial external LoaderContainer. + LoaderContainerVisible = false; } protected override void OnInitialized() { - AllData = Enumerable.Range(1, 30).Select(x => new GridModel + for (int i = 1; i <= 30; i++) { - Id = x, - Text = "Text " + x - }).ToList(); - - base.OnInitialized(); + GridData.Add(new Product() + { + Id = i, + Name = $"Name {i}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000) + }); + } } - public class GridModel + public class Product { public int Id { get; set; } - public string Text { get; set; } + public string Name { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } } } ```` From e3d04aa2b2636d0ddeb0a21898bd39fd1651857b Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:52:33 +0200 Subject: [PATCH 2/4] Update components/grid/loading-animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/loading-animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/loading-animation.md b/components/grid/loading-animation.md index a9b81b7ff5..8110402177 100644 --- a/components/grid/loading-animation.md +++ b/components/grid/loading-animation.md @@ -14,7 +14,7 @@ The Grid can show a loading animation to indicate data operations that take more ## Basics -The Grid `EnableLoaderContainer` parameter determines if the component will show a built-in LoaderContainer for long operations. The loading animation is enabled by detault. The data operations that trigger the loading animation include: +The Grid `EnableLoaderContainer` parameter determines if the component will show a built-in LoaderContainer for long-running operations. The loading animation is enabled by default. The data operations that trigger the loading animation include: * [Paging]({%slug components/grid/features/paging%}) * [Filtering]({%slug components/grid/filtering%}) From 69c36fd35386fc303b8e9b08acbbf36ad1df1376 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:52:44 +0200 Subject: [PATCH 3/4] Update components/grid/loading-animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/loading-animation.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/grid/loading-animation.md b/components/grid/loading-animation.md index 8110402177..9482763e28 100644 --- a/components/grid/loading-animation.md +++ b/components/grid/loading-animation.md @@ -25,7 +25,9 @@ The Grid `EnableLoaderContainer` parameter determines if the component will show ## Show LoaderContainer on Initial Load -The Grid will not display a loading animation during its initial rendering and data load. The component cannot know when or even if data will be provided to it, especially when using the Grid `Data` parameter. Initial automatic loading sign can either show indefinitely, or it could prevent the user from altering any saved Grid state (such as changing filters). If you want to display a loading animation on initial load, you can use a [LoaderContainer component]({%slug loadercontainer-overview%}). See the example below or the [Grid Loading Animation Live Demo](https://demos.telerik.com/blazor-ui/grid/loading-animation). +The Grid does not display a loading animation during its initial rendering and data load. The component cannot know when or even if data will be provided to it, especially when using the Grid `Data` parameter. An initial automatic loading sign can either show indefinitely, or it could prevent the user from altering any saved Grid state (such as changing filters). + +If you want to display a loading animation on initial load, you can use a [LoaderContainer component]({%slug loadercontainer-overview%}). See the example below or the [Grid Loading Animation Live Demo](https://demos.telerik.com/blazor-ui/grid/loading-animation). ## Example From fac0f1fa8f4c9994921e5c2a0881cf40bb66025f Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:55:09 +0200 Subject: [PATCH 4/4] Update components/grid/loading-animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/loading-animation.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/grid/loading-animation.md b/components/grid/loading-animation.md index 9482763e28..77757604f2 100644 --- a/components/grid/loading-animation.md +++ b/components/grid/loading-animation.md @@ -10,7 +10,9 @@ position: 90 # Loading Animation -The Grid can show a loading animation to indicate data operations that take more than 600ms to complete. The indicator appears as a loading sign over the Blazor Data Grid. The loading animation improves user experience with a visual hint that the requested action is still executing. The feature can prevent repetitive user actions. +The Grid can show a loading animation during data operations that take more than 600ms to complete. This improves the user experience with a visual hint that the requested action is still running and prevents repetitive user actions. + +The animation appears as a loading indicator over the Blazor Data Grid. ## Basics