From 5edee82cd86bf267b4dac2a464582ff42bffce6f Mon Sep 17 00:00:00 2001 From: KB Bot Date: Tue, 21 Jan 2025 15:13:50 +0000 Subject: [PATCH 1/5] Added new kb article grid-kb-loader-during-contextmenu-actions --- ...id-kb-loader-during-contextmenu-actions.md | 95 +++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 knowledge-base/grid-kb-loader-during-contextmenu-actions.md diff --git a/knowledge-base/grid-kb-loader-during-contextmenu-actions.md b/knowledge-base/grid-kb-loader-during-contextmenu-actions.md new file mode 100644 index 0000000000..da6ed0ed69 --- /dev/null +++ b/knowledge-base/grid-kb-loader-during-contextmenu-actions.md @@ -0,0 +1,95 @@ +--- +title: Displaying Loader During Actions in TelerikGrid with ContextMenu +description: Learn how to show a loading indicator while performing actions from a ContextMenu in a TelerikGrid for Blazor. +type: how-to +page_title: How to Display a Loader in TelerikGrid for Blazor During ContextMenu Actions +slug: grid-kb-loader-during-contextmenu-actions +tags: contextmenu,grid,loader,loading, loadercontainer,actions +res_type: kb +ticketid: 1675767 +--- + +## Environment + + + + + + + + + +
ProductGrid for BlazorContext Menu for Blazor
+ +## Description + +When using the TelerikGrid with ContextMenu for various row actions, there is a noticeable delay between selecting an action and its execution. This delay could be due to data retrieval or data manipulation. The goal is to display a loading notice to the user while the data loads and the result is not yet visible. + +This knowledge base article also answers the following questions: +- How to use the TelerikLoaderContainer during data fetch operations in Blazor? +- How to show a loading indicator while waiting for an action? +- How to improve user experience during delayed operations in TelerikGrid with ContextMenu in Blazor? + +## Solution + +To display a spinner during delayed operations initiated from a ContextMenu in a TelerikGrid, utilize the [TelerikLoaderContainer](https://www.telerik.com/blazor-ui/documentation/components/loadercontainer/overview) component. Display the TelerikLoaderContainer while the data is being loaded or an action is being performed, and hide it once the operation is complete. + +````RAZOR +@using System.Collections.Generic +@using System.Collections.ObjectModel +@using Telerik.Blazor.Components + + + + + + + + + Add Employee + + + + + + Save + Cancel + + + + +@code { + private ObservableCollection GridData { get; set; } + private List MenuItems { get; set; } + private IEnumerable SelectedItems { get; set; } = Enumerable.Empty(); + private SampleData SelectedPerson { get; set; } + private TelerikContextMenu ContextMenuRef { get; set; } + private TelerikGrid GridRef { get; set; } + private bool LoaderVisible { get; set; } + + private async Task ContextMenuClickHandler(MenuItem item) + { + LoaderVisible = true; + // Perform the action, such as data loading or another operation. + await Task.Delay(3000); // Simulate a delay for demonstration. + LoaderVisible = false; + // Proceed with action-specific logic after the delay. + } + + // Additional component logic such as data initialization and CRUD operations. +} +```` + +## See Also + +- [TelerikLoaderContainer Overview](https://www.telerik.com/blazor-ui/documentation/components/loadercontainer/overview) +- [TelerikGrid Documentation](https://docs.telerik.com/blazor-ui/components/grid/overview) +- [TelerikContextMenu Documentation](https://docs.telerik.com/blazor-ui/components/contextmenu/overview) From 5a6c5f37a4e546cd34b711f392e81930690bbbab Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 13:50:03 +0200 Subject: [PATCH 2/5] chore(Grid): address comments --- ...id-kb-loader-during-contextmenu-actions.md | 95 ------- .../grid-loader-during-contextmenu-actions.md | 237 ++++++++++++++++++ 2 files changed, 237 insertions(+), 95 deletions(-) delete mode 100644 knowledge-base/grid-kb-loader-during-contextmenu-actions.md create mode 100644 knowledge-base/grid-loader-during-contextmenu-actions.md diff --git a/knowledge-base/grid-kb-loader-during-contextmenu-actions.md b/knowledge-base/grid-kb-loader-during-contextmenu-actions.md deleted file mode 100644 index da6ed0ed69..0000000000 --- a/knowledge-base/grid-kb-loader-during-contextmenu-actions.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Displaying Loader During Actions in TelerikGrid with ContextMenu -description: Learn how to show a loading indicator while performing actions from a ContextMenu in a TelerikGrid for Blazor. -type: how-to -page_title: How to Display a Loader in TelerikGrid for Blazor During ContextMenu Actions -slug: grid-kb-loader-during-contextmenu-actions -tags: contextmenu,grid,loader,loading, loadercontainer,actions -res_type: kb -ticketid: 1675767 ---- - -## Environment - - - - - - - - - -
ProductGrid for BlazorContext Menu for Blazor
- -## Description - -When using the TelerikGrid with ContextMenu for various row actions, there is a noticeable delay between selecting an action and its execution. This delay could be due to data retrieval or data manipulation. The goal is to display a loading notice to the user while the data loads and the result is not yet visible. - -This knowledge base article also answers the following questions: -- How to use the TelerikLoaderContainer during data fetch operations in Blazor? -- How to show a loading indicator while waiting for an action? -- How to improve user experience during delayed operations in TelerikGrid with ContextMenu in Blazor? - -## Solution - -To display a spinner during delayed operations initiated from a ContextMenu in a TelerikGrid, utilize the [TelerikLoaderContainer](https://www.telerik.com/blazor-ui/documentation/components/loadercontainer/overview) component. Display the TelerikLoaderContainer while the data is being loaded or an action is being performed, and hide it once the operation is complete. - -````RAZOR -@using System.Collections.Generic -@using System.Collections.ObjectModel -@using Telerik.Blazor.Components - - - - - - - - - Add Employee - - - - - - Save - Cancel - - - - -@code { - private ObservableCollection GridData { get; set; } - private List MenuItems { get; set; } - private IEnumerable SelectedItems { get; set; } = Enumerable.Empty(); - private SampleData SelectedPerson { get; set; } - private TelerikContextMenu ContextMenuRef { get; set; } - private TelerikGrid GridRef { get; set; } - private bool LoaderVisible { get; set; } - - private async Task ContextMenuClickHandler(MenuItem item) - { - LoaderVisible = true; - // Perform the action, such as data loading or another operation. - await Task.Delay(3000); // Simulate a delay for demonstration. - LoaderVisible = false; - // Proceed with action-specific logic after the delay. - } - - // Additional component logic such as data initialization and CRUD operations. -} -```` - -## See Also - -- [TelerikLoaderContainer Overview](https://www.telerik.com/blazor-ui/documentation/components/loadercontainer/overview) -- [TelerikGrid Documentation](https://docs.telerik.com/blazor-ui/components/grid/overview) -- [TelerikContextMenu Documentation](https://docs.telerik.com/blazor-ui/components/contextmenu/overview) diff --git a/knowledge-base/grid-loader-during-contextmenu-actions.md b/knowledge-base/grid-loader-during-contextmenu-actions.md new file mode 100644 index 0000000000..3ded9d8ffa --- /dev/null +++ b/knowledge-base/grid-loader-during-contextmenu-actions.md @@ -0,0 +1,237 @@ +--- +title: Display Loader During Actions in TelerikGrid with ContextMenu +description: Learn how to show a loading indicator while performing actions from a ContextMenu in a TelerikGrid for Blazor. +type: how-to +page_title: How to Display a Loader in TelerikGrid for Blazor During ContextMenu Actions +slug: grid-kb-loader-during-contextmenu-actions +tags: contextmenu,grid,loader,loading, loadercontainer,actions +res_type: kb +ticketid: 1675767 +--- + +## Environment + + + + + + + + + +
ProductGrid for BlazorContext Menu for Blazor
+ +## Description + +When the TelerikGrid is used with ContextMenu for various row actions, there is a noticeable delay between selecting an action and its execution. This delay could be due to data retrieval or data manipulation. The goal is to display a loading notice to the user while the data loads and the result is not yet visible. + +This knowledge base article also answers the following questions: +- How to use the TelerikLoaderContainer during data fetch operations in Blazor? +- How to show a loading indicator while waiting for an action? +- How to improve user experience during delayed operations in TelerikGrid with ContextMenu in Blazor? + +## Solution + +To display a spinner during delayed operations initiated from a ContextMenu in a TelerikGrid, utilize the [TelerikLoaderContainer](slug://loadercontainer-overview) component. Display the TelerikLoaderContainer while the data is being loaded or an action is being performed, and hide it once the operation is complete. + +````RAZOR +@using System.Collections.ObjectModel + + + + + + + + + Add Employee + + + + + + Save + Cancel + + + + +@if (SelectedItems.Any()) +{ +
    + @foreach (var item in SelectedItems) + { +
  • @item.Name
    • + } +
+} + +@code { + private ObservableCollection GridData { get; set; } + private List MenuItems { get; set; } + private IEnumerable SelectedItems { get; set; } = Enumerable.Empty(); + private SampleData SelectedPerson { get; set; } + private TelerikContextMenu ContextMenuRef { get; set; } + private TelerikGrid GridRef { get; set; } + private bool LoaderVisible { get; set; } + + public class MenuItem + { + public string Text { get; set; } + public ISvgIcon Icon { get; set; } + public Action Action { get; set; } + public string CommandName { get; set; } + } + + private async Task OnContextMenu(GridRowClickEventArgs args) + { + var argsItem = args.Item as SampleData; + + SelectedPerson = argsItem; + + if (args.EventArgs is MouseEventArgs mouseEventArgs) + { + await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY); + } + } + + private async Task ContextMenuClickHandler(MenuItem item) + { + if (item.Action != null) + { + item.Action.Invoke(); + } + else + { + switch (item.CommandName) + { + case "BeginEdit": + LoaderVisible = true; + await Task.Delay(3000); //initiates delay + LoaderVisible = false; + + var currState = GridRef.GetState(); + currState.InsertedItem = null; + SampleData itemToEdit = SampleData.GetClonedInstance(GridData.Where(itm => itm.ID == SelectedPerson.ID).FirstOrDefault()); + currState.OriginalEditItem = itemToEdit; + await GridRef.SetStateAsync(currState); + break; + case "ToggleSelect": + LoaderVisible = true; + await Task.Delay(3000); //initiates delay + LoaderVisible = false; + + var selItems = SelectedItems.ToList(); + if (SelectedItems.Contains(SelectedPerson)) + { + selItems.Remove(SelectedPerson); + } + else + { + selItems.Add(SelectedPerson); + } + SelectedItems = selItems; + break; + default: + break; + } + } + SelectedPerson = null; // clean up + } + + protected override void OnInitialized() + { + MenuItems = new List() + { + new MenuItem(){ Text = "Select", Icon = SvgIcon.CheckboxChecked, CommandName="ToggleSelect" }, + new MenuItem(){ Text = "Edit", Icon = SvgIcon.Pencil, CommandName="BeginEdit" }, + new MenuItem(){ Text = "Delete", Icon = SvgIcon.Trash, Action = DeleteItem } + }; + + GridData = new ObservableCollection(); + var rand = new Random(); + + for (int i = 0; i < 100; i++) + { + GridData.Add(new SampleData() + { + ID = i, + Name = "Employee " + i.ToString(), + }); + } + } + + private async Task CreateItem(GridCommandEventArgs args) + { + var argsItem = args.Item as SampleData; + + argsItem.ID = GridData.Count + 1; + + GridData.Insert(0, argsItem); + } + + private void DeleteItem() + { + var argsItem = SelectedPerson; + + GridData.Remove(argsItem); + } + + private async Task UpdateHandler(GridCommandEventArgs args) + { + var argsItem = args.Item as SampleData; + + var index = GridData.ToList().FindIndex(i => i.ID == argsItem.ID); + if (index != -1) + { + GridData[index] = argsItem; + } + } + + public class SampleData + { + public int ID { get; set; } + public string Name { get; set; } + + + public override bool Equals(object obj) + { + if (obj is SampleData) + { + return this.ID == (obj as SampleData).ID; + } + return false; + } + + public SampleData() + { + + } + + public SampleData(SampleData itmToClone) + { + this.ID = itmToClone.ID; + this.Name = itmToClone.Name; + } + + public static SampleData GetClonedInstance(SampleData itmToClone) + { + return new SampleData(itmToClone); + } + } +} +```` + +## See Also + +- [LoaderContainer Overview](slug://loadercontainer-overview) +- [Grid Documentation](slug://grid-overview) +- [ContextMenu Documentation](slug://contextmenu-overview) From 09f5bbee470e4547aa4940501ae8a03c5c48de76 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 17:06:49 +0200 Subject: [PATCH 3/5] chore(Grid): address latest comments --- .../grid-loader-during-contextmenu-actions.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/knowledge-base/grid-loader-during-contextmenu-actions.md b/knowledge-base/grid-loader-during-contextmenu-actions.md index 3ded9d8ffa..f09f9be4f1 100644 --- a/knowledge-base/grid-loader-during-contextmenu-actions.md +++ b/knowledge-base/grid-loader-during-contextmenu-actions.md @@ -1,10 +1,10 @@ --- -title: Display Loader During Actions in TelerikGrid with ContextMenu -description: Learn how to show a loading indicator while performing actions from a ContextMenu in a TelerikGrid for Blazor. +title: Display Loader During ContextMenu Actions in Grid +description: Learn how to show a loading indicator while performing actions from a ContextMenu in a Telerik Grid for Blazor. type: how-to page_title: How to Display a Loader in TelerikGrid for Blazor During ContextMenu Actions slug: grid-kb-loader-during-contextmenu-actions -tags: contextmenu,grid,loader,loading, loadercontainer,actions +tags: contextmenu, grid, loader, loading, loadercontainer res_type: kb ticketid: 1675767 --- @@ -115,7 +115,7 @@ To display a spinner during delayed operations initiated from a ContextMenu in a { case "BeginEdit": LoaderVisible = true; - await Task.Delay(3000); //initiates delay + await Task.Delay(1); // triggers UI refresh for the LoaderContainer to show LoaderVisible = false; var currState = GridRef.GetState(); @@ -126,7 +126,7 @@ To display a spinner during delayed operations initiated from a ContextMenu in a break; case "ToggleSelect": LoaderVisible = true; - await Task.Delay(3000); //initiates delay + await Task.Delay(1); // triggers UI refresh for the LoaderContainer to show LoaderVisible = false; var selItems = SelectedItems.ToList(); @@ -159,13 +159,13 @@ To display a spinner during delayed operations initiated from a ContextMenu in a GridData = new ObservableCollection(); var rand = new Random(); - for (int i = 0; i < 100; i++) + for (int i = 1; i < 100; i++) { GridData.Add(new SampleData() - { - ID = i, - Name = "Employee " + i.ToString(), - }); + { + ID = i, + Name = "Employee " + i.ToString(), + }); } } @@ -232,6 +232,6 @@ To display a spinner during delayed operations initiated from a ContextMenu in a ## See Also -- [LoaderContainer Overview](slug://loadercontainer-overview) -- [Grid Documentation](slug://grid-overview) -- [ContextMenu Documentation](slug://contextmenu-overview) +* [LoaderContainer Overview](slug://loadercontainer-overview) +* [Grid Overview](slug://grid-overview) +* [ContextMenu Overview](slug://contextmenu-overview) From cd50ddf28caa8b3d16b0b3ccd19d34d7f904fbbb Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 17:10:42 +0200 Subject: [PATCH 4/5] chore(Grid): return delay --- knowledge-base/grid-loader-during-contextmenu-actions.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/knowledge-base/grid-loader-during-contextmenu-actions.md b/knowledge-base/grid-loader-during-contextmenu-actions.md index f09f9be4f1..d1e8b746ed 100644 --- a/knowledge-base/grid-loader-during-contextmenu-actions.md +++ b/knowledge-base/grid-loader-during-contextmenu-actions.md @@ -116,6 +116,7 @@ To display a spinner during delayed operations initiated from a ContextMenu in a case "BeginEdit": LoaderVisible = true; await Task.Delay(1); // triggers UI refresh for the LoaderContainer to show + await Task.Delay(3000); // replace with the actual long-running task LoaderVisible = false; var currState = GridRef.GetState(); @@ -127,6 +128,7 @@ To display a spinner during delayed operations initiated from a ContextMenu in a case "ToggleSelect": LoaderVisible = true; await Task.Delay(1); // triggers UI refresh for the LoaderContainer to show + await Task.Delay(3000); // replace with the actual long-running task LoaderVisible = false; var selItems = SelectedItems.ToList(); From 08910ce6255e5761a9558ef6a8fc817565eed548 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 24 Jan 2025 14:22:48 +0200 Subject: [PATCH 5/5] chore(Grid): remove delete action as per last comment --- .../grid-loader-during-contextmenu-actions.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/knowledge-base/grid-loader-during-contextmenu-actions.md b/knowledge-base/grid-loader-during-contextmenu-actions.md index d1e8b746ed..d1f7d393b0 100644 --- a/knowledge-base/grid-loader-during-contextmenu-actions.md +++ b/knowledge-base/grid-loader-during-contextmenu-actions.md @@ -154,8 +154,7 @@ To display a spinner during delayed operations initiated from a ContextMenu in a MenuItems = new List() { new MenuItem(){ Text = "Select", Icon = SvgIcon.CheckboxChecked, CommandName="ToggleSelect" }, - new MenuItem(){ Text = "Edit", Icon = SvgIcon.Pencil, CommandName="BeginEdit" }, - new MenuItem(){ Text = "Delete", Icon = SvgIcon.Trash, Action = DeleteItem } + new MenuItem(){ Text = "Edit", Icon = SvgIcon.Pencil, CommandName="BeginEdit" } }; GridData = new ObservableCollection(); @@ -180,13 +179,6 @@ To display a spinner during delayed operations initiated from a ContextMenu in a GridData.Insert(0, argsItem); } - private void DeleteItem() - { - var argsItem = SelectedPerson; - - GridData.Remove(argsItem); - } - private async Task UpdateHandler(GridCommandEventArgs args) { var argsItem = args.Item as SampleData;