From ed83bba449fe0c151a9e99eaa0e5fd3e30c3c2e6 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:43:57 +0300 Subject: [PATCH 1/4] kb(grid): Revamp Custom Delete Confirmation examples --- ...id-customize-delete-confirmation-dialog.md | 283 ++++++++++++------ 1 file changed, 197 insertions(+), 86 deletions(-) diff --git a/knowledge-base/grid-customize-delete-confirmation-dialog.md b/knowledge-base/grid-customize-delete-confirmation-dialog.md index 6bea88342c..381b37f782 100644 --- a/knowledge-base/grid-customize-delete-confirmation-dialog.md +++ b/knowledge-base/grid-customize-delete-confirmation-dialog.md @@ -6,18 +6,19 @@ page_title: Customize the Delete Confirmation Dialogs slug: grid-kb-customize-delete-confirmation-dialog position: tags: grid, customize, delete, confirmation, dialog, message -ticketid: 1553006 +ticketid: 1553006, 1660439, 1625888 res_type: kb --- ## Environment + - - - - - - + + + + + +
ProductGrid for Blazor
TreeList for Blazor
Scheduler for Blazor
ProductGrid for Blazor
TreeList for Blazor
Scheduler for Blazor
@@ -63,70 +64,120 @@ The keys for the elements of the built-in Delete Confirmation Dialog are: Use [Predefined Confirm Dialog]({%slug dialog-predefined%}#confirm) with the desired custom text. Additionally, you may get the details for the current item and add them to the text: -* Handle the [`OnDelete`]({%slug grid-events%}#cud-events) event of the Grid -* Display the Predefined Dialog in the `OnDelete` handler -* Cancel the event or proceed with the `OnDelete` logic depending on the user choice +* Use the Grid `Class` parameter to set a `z-index` style, which is lower than the default Dialog `z-index` of 10,000. +* Handle the [`OnDelete`]({%slug grid-events%}#cud-events) event of the Grid. +* Display the predefined Dialog in the `OnDelete` handler. +* Cancel the event or proceed with the `OnDelete` logic depending on the user choice. +* The same approach is applicable for the `OnCreate` and `OnUpdate` events. ````CSHTML - + PageSize="20" + Height="90vh"> - - - - Delete + + + + + Edit + Save + Cancel + Delete -@code { - private List GridData { get; set; } + +@code { [CascadingParameter] - public DialogFactory Dialogs { get; set; } + public DialogFactory? TelerikDialogs { get; set; } - private bool confirmDelete { get; set; } + private List GridData { get; set; } = new(); - private async Task DeleteHandler(GridCommandEventArgs args) - { - SampleData item = (SampleData)args.Item; + private int LastId { get; set; } - //show dialog and use a bool to save its result - confirmDelete = await Dialogs.ConfirmAsync($"Are you sure you want to delete {item.Name}?", "Please confirm!"); + private async Task OnGridUpdate(GridCommandEventArgs args) + { + var updatedItem = (Product)args.Item; - //cancel the delete if the user did not confirm - if (!confirmDelete) + bool cancelled = await ShouldCancel("Updating", updatedItem.Name); + if (cancelled) { args.IsCancelled = true; + return; } - //delete the item if the user confirms - else + + var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id); + + if (originalItemIndex != -1) { - GridData.Remove(item); + GridData[originalItemIndex] = updatedItem; } } - protected override async Task OnInitializedAsync() + private async Task OnGridDelete(GridCommandEventArgs args) { - GridData = new List(); + var deletedItem = (Product)args.Item; - for (int i = 0; i < 50; i++) + bool cancelled = await ShouldCancel("Deleting", deletedItem.Name); + if (cancelled) { - GridData.Add(new SampleData() - { - ID = i, - Name = "Name " + i.ToString() - }); + args.IsCancelled = true; + return; } + + GridData.Remove(deletedItem); } - // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example - public class SampleData + private async Task ShouldCancel(string operation, string name) { - public int ID { get; set; } - public string Name { get; set; } + string dialogMessage = $"{operation} product {name}. Continue?"; + + bool dialogResult = true; + + if (TelerikDialogs != null) + { + dialogResult = await TelerikDialogs.ConfirmAsync(dialogMessage, "Confirm Data Change"); + } + + return !dialogResult; + } + + protected override void OnInitialized() + { + for (int i = 1; i <= 30; i++) + { + GridData.Add(new Product() + { + Id = ++LastId, + Name = $"Name {LastId}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000), + }); + } + } + + public class Product + { + public int Id { get; set; } + [Required] + public string Name { get; set; } = "Default Name"; + public decimal Price { get; set; } + public int Quantity { get; set; } } } ```` @@ -136,94 +187,154 @@ Use [Predefined Confirm Dialog]({%slug dialog-predefined%}#confirm) with the des Using the [Dialog component]({%slug dialog-overview%}) will let you have fully customized Delete Confirmation Dialog. To handle the scenario: * Declare a Dialog instance and add the desired content and buttons there. Normally, you would need at least two buttons - for confirmation and cancelling the delete operation. -* Handle the [`OnDelete`]({%slug grid-events%}#cud-events) event of the Grid to cancel the built-in delete, show the custom Dialog and get the current item (save the current item, so you can then use its details in the dialog if needed). +* Use [custom commands]({%slug components/grid/columns/command%}) instead of the built-in `Save` and `Delete` commands to obtain the data item and show the Dialog component. * Handle the Dialog button clicks: - * Proceed with the item deletion in the Confirm button click handler. - * Hide the Dialog on Cancel. + * Proceed with the item deletion in the Confirm button click handler. + * Hide the Dialog on Cancel. Optionally, [exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). +* The same approach is applicable for the `OnCreate` and `OnUpdate` events. ````CSHTML +@using System.ComponentModel.DataAnnotations + + PageSize="20" + Height="90vh"> - - + + + - Delete + Edit + Save + Cancel + Delete + Width="300px" + ButtonsLayout="@DialogButtonsLayout.End"> + + Confirm Data Change + - Are you sure you want to delete item with name: @CurrentItem.Name? + @DialogContent - Delete - Cancel + OK + Cancel @code { - private List GridData { get; set; } - - private TelerikGrid GridRef; + private TelerikGrid? GridRef { get; set; } + private List GridData { get; set; } = new(); private bool DialogVisible { get; set; } - private string Title { get; set; } = "Custom delete confirmation"; + private Product? ItemToUpdate { get; set; } + private Product? ItemToDelete { get; set; } - private SampleData CurrentItem { get; set; } + private MarkupString DialogContent { get; set; } = new(); - private async Task DeleteHandler(GridCommandEventArgs args) + private int LastId { get; set; } + + private void OnGridSave(GridCommandEventArgs args) { - //get the current item from the args - CurrentItem = (SampleData)args.Item; + var itemToUpdate = (Product)args.Item; + ItemToUpdate = itemToUpdate; + + DialogContent = new MarkupString($"

Saving product {ItemToUpdate.Name}.
Do you want to continue?

"); + DialogVisible = true; + } - //cancel the built-in delete as you will handle the deletion in the dialog button click handler - args.IsCancelled = true; + private void OnGridDelete(GridCommandEventArgs args) + { + var deletedItem = (Product)args.Item; + ItemToDelete = deletedItem; - //show the dialog + DialogContent = new MarkupString($"

Deleting product {ItemToDelete.Name}.
Do you want to continue?

"); DialogVisible = true; + } - //if needed, you can also customize the title to contain item details - Title = "Custom title for " + CurrentItem.Name; + private void OnGridCancel(GridCommandEventArgs args) + { + ItemToUpdate = null; } - private async Task DeleteItemFromDialog() + private async Task OnDialogButtonClick(bool operationConfirmed) { - //delete the item - GridData.Remove(CurrentItem); + if (operationConfirmed) + { + if (ItemToDelete != null) + { + GridData.Remove(ItemToDelete); + } + + if (ItemToUpdate != null) + { + var originalItemIndex = GridData.FindIndex(i => i.Id == ItemToUpdate.Id); - //refresh the Grid data - GridRef.Rebind(); + if (originalItemIndex != -1) + { + GridData[originalItemIndex] = ItemToUpdate; + } + } + + GridRef!.Rebind(); + } + else if (ItemToUpdate != null) + { + var gridState = GridRef!.GetState(); + + gridState.EditItem = null!; + gridState.OriginalEditItem = null!; + + await GridRef!.SetStateAsync(gridState); + } - //hide the dialog DialogVisible = false; + + ItemToDelete = null; + ItemToUpdate = null; } - protected override async Task OnInitializedAsync() + protected override void OnInitialized() { - GridData = new List(); - - for (int i = 0; i < 50; i++) + for (int i = 1; i <= 30; i++) { - GridData.Add(new SampleData() - { - ID = i, - Name = "Name " + i.ToString() - }); + GridData.Add(new Product() + { + Id = ++LastId, + Name = $"Name {LastId}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000), + }); } } - // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example - public class SampleData + public class Product { - public int ID { get; set; } - public string Name { get; set; } + public int Id { get; set; } + [Required] + public string Name { get; set; } = "Default Name"; + public decimal Price { get; set; } + public int Quantity { get; set; } } } ```` + +## See Also + +* [Grid Editing]({%slug components/grid/editing/overview%}) +* [Dialog Overview]({%slug dialog-overview%}) From 63e72f0612debe74761fb0e1fafd873d3820ac94 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:19:12 +0300 Subject: [PATCH 2/4] Update knowledge-base/grid-customize-delete-confirmation-dialog.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-customize-delete-confirmation-dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-customize-delete-confirmation-dialog.md b/knowledge-base/grid-customize-delete-confirmation-dialog.md index 381b37f782..98639f3cd8 100644 --- a/knowledge-base/grid-customize-delete-confirmation-dialog.md +++ b/knowledge-base/grid-customize-delete-confirmation-dialog.md @@ -62,7 +62,7 @@ The keys for the elements of the built-in Delete Confirmation Dialog are: ### Predefined Dialog Component -Use [Predefined Confirm Dialog]({%slug dialog-predefined%}#confirm) with the desired custom text. Additionally, you may get the details for the current item and add them to the text: +Use a [Predefined Confirm Dialog]({%slug dialog-predefined%}#confirm) with the desired custom text. Additionally, you may get the details for the current item and add them to the text: * Use the Grid `Class` parameter to set a `z-index` style, which is lower than the default Dialog `z-index` of 10,000. * Handle the [`OnDelete`]({%slug grid-events%}#cud-events) event of the Grid. From ca66350fe3663ea5733a8431f570d6da06aa02bb Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:19:29 +0300 Subject: [PATCH 3/4] Update knowledge-base/grid-customize-delete-confirmation-dialog.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-customize-delete-confirmation-dialog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-customize-delete-confirmation-dialog.md b/knowledge-base/grid-customize-delete-confirmation-dialog.md index 98639f3cd8..1da6ca1d25 100644 --- a/knowledge-base/grid-customize-delete-confirmation-dialog.md +++ b/knowledge-base/grid-customize-delete-confirmation-dialog.md @@ -16,7 +16,7 @@ res_type: kb Product - Grid for Blazor
TreeList for Blazor
Scheduler for Blazor + Grid for Blazor
TreeList for Blazor
Scheduler for Blazor From 8f20448a1c949ca4543064c4ab8ba91dbf10abce Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:21:26 +0300 Subject: [PATCH 4/4] Update grid-customize-delete-confirmation-dialog.md --- .../grid-customize-delete-confirmation-dialog.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/knowledge-base/grid-customize-delete-confirmation-dialog.md b/knowledge-base/grid-customize-delete-confirmation-dialog.md index 1da6ca1d25..2198f25a59 100644 --- a/knowledge-base/grid-customize-delete-confirmation-dialog.md +++ b/knowledge-base/grid-customize-delete-confirmation-dialog.md @@ -24,13 +24,12 @@ res_type: kb ## Description -How to customize the built-in Delete Confirmation Dialog of the Grid? +This KB article answers the following questions: -I want to add some item details to the text of the Delete Confirmation Dialog to notify the user for the item they are trying to delete. How to achieve that? - -How to change the text of the buttons in the Delete Confirmation Dialog? - -How to change the title and the content of the Delete Confirmation Dialog? +* How to customize the built-in Delete Confirmation Dialog of the Grid? +* I want to add some item details to the text of the Delete Confirmation Dialog to notify the user for the item they are trying to delete. How to achieve that? +* How to change the text of the buttons in the Delete Confirmation Dialog? +* How to change the title and the content of the Delete Confirmation Dialog? ## Solution @@ -68,7 +67,7 @@ Use a [Predefined Confirm Dialog]({%slug dialog-predefined%}#confirm) with the d * Handle the [`OnDelete`]({%slug grid-events%}#cud-events) event of the Grid. * Display the predefined Dialog in the `OnDelete` handler. * Cancel the event or proceed with the `OnDelete` logic depending on the user choice. -* The same approach is applicable for the `OnCreate` and `OnUpdate` events. +* The same approach is applicable to the `OnCreate` and `OnUpdate` events. ````CSHTML @using System.ComponentModel.DataAnnotations @@ -191,7 +190,7 @@ Using the [Dialog component]({%slug dialog-overview%}) will let you have fully c * Handle the Dialog button clicks: * Proceed with the item deletion in the Confirm button click handler. * Hide the Dialog on Cancel. Optionally, [exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). -* The same approach is applicable for the `OnCreate` and `OnUpdate` events. +* The same approach is applicable to the `OnCreate` and `OnUpdate` events. ````CSHTML @using System.ComponentModel.DataAnnotations