diff --git a/_config.yml b/_config.yml index 1d4ae46361..19983c8820 100644 --- a/_config.yml +++ b/_config.yml @@ -79,6 +79,9 @@ navigation: "*components/grid/editing": title: "Editing" position: 10 + "*components/grid/editing/built-in-dialogs": + title: "Built-in Dialogs" + position: 17 "*components/grid/filter": title: "Filtering" position: 22 @@ -103,6 +106,9 @@ navigation: "*components/treelist/editing": title: "Editing" position: 10 + "*components/treelist/editing/built-in-dialogs": + title: "Built-in Dialogs" + position: 17 "*components/treelist/filter": title: "Filtering" position: 22 diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index fd28e63a9c..9a910d0458 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -43,6 +43,7 @@ There are four built-in commands: * `Add` - initiates the creation of a new item. * `Edit` - initiates the inline or popup editing (depending on the GridEditMode configuration of the grid). +* `Delete` - initiates the deletion of an existing item. You can also enable a [delete confirmation dialog]({%slug grid-delete-confirmation%}). * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited. * `Cancel` - aborts the current operation (edit or insert). diff --git a/components/grid/editing/built-in-dialogs/delete-confirmation.md b/components/grid/editing/built-in-dialogs/delete-confirmation.md new file mode 100644 index 0000000000..ebd1d24db8 --- /dev/null +++ b/components/grid/editing/built-in-dialogs/delete-confirmation.md @@ -0,0 +1,102 @@ +--- +title: Delete Confirmation +page_title: Grid - Delete Confirmation Dialog +description: Enable delete confirmation dialog in Grid for Blazor. +slug: grid-delete-confirmation +tags: telerik,blazor,grid,delete,confirmation,dialog +published: True +position: 3 +--- + +# Delete Confirmation Dialog +The delete confirmation dialog triggers before item deletion. You can enable it by setting the `ConfirmDelete` parameter of the Grid to `true`. + +>caption Delete Confirmation dialog + +![](../images/grid-delete-confirmation.gif) + +>caption Enabling of the Delete Confirmation Dialog + +````CSHTML +@* Grid with enabled Delete Confirmation Dialog *@ + +@using System.ComponentModel.DataAnnotations + + + + + + + Delete + + + + +@code { + async Task DeleteHandler(GridCommandEventArgs args) + { + SampleData item = (SampleData)args.Item; + + await MyService.Delete(item); + + await GetGridData(); + } + + public class SampleData + { + public int ID { get; set; } + [Required] + public string Name { get; set; } + } + + List MyData { get; set; } + + async Task GetGridData() + { + MyData = await MyService.Read(); + } + + protected override async Task OnInitializedAsync() + { + await GetGridData(); + } + + public static class MyService + { + private static List _data { get; set; } = new List(); + + public static async Task> Read() + { + if (_data.Count < 1) + { + for (int i = 1; i < 50; i++) + { + _data.Add(new SampleData() + { + ID = i, + Name = "Name " + i.ToString() + }); + } + } + + return await Task.FromResult(_data); + } + + public static async Task Delete(SampleData itemToDelete) + { + _data.Remove(itemToDelete); + } + } +} +```` + + +## See Also + +* [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline) +* [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup) +* [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell) +* [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor) +* [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form) + diff --git a/components/grid/editing/built-in-dialogs/overview.md b/components/grid/editing/built-in-dialogs/overview.md new file mode 100644 index 0000000000..487ebb5228 --- /dev/null +++ b/components/grid/editing/built-in-dialogs/overview.md @@ -0,0 +1,28 @@ +--- +title: Overview +page_title: Editing - Built-in Dialogs Overview +description: Enable built-in dialogs in Grid for Blazor. +slug: components/grid/features/built-in-dialogs +tags: telerik,blazor,grid,built,in,dialogs +published: True +previous_url: /grid/built-in-dialogs +position: 0 +--- + +# Grid Built-in Dialogs +You can enable built-in dialogs in Grid to provide an extra step for the end-user before a Grid operation. + +The Grid component can use built-in dialogs for: + +* [delete confirmation]({%slug grid-delete-confirmation%}) - displays a confirmation dialog when the user clicks the "**delete**" command button. + +The default texts of the dialogs are exposed in the [localization]({%slug globalization-localization%}) messages of the component, and you can customize them. + +## See Also + +* [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline) +* [Live Demo: Grid PopUp Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup) +* [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell) +* [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor) +* [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form) + diff --git a/components/grid/editing/images/grid-delete-confirmation.gif b/components/grid/editing/images/grid-delete-confirmation.gif new file mode 100644 index 0000000000..d06352b39b Binary files /dev/null and b/components/grid/editing/images/grid-delete-confirmation.gif differ diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index 70f99387c3..9c23fbdb2d 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -27,7 +27,7 @@ List of the available events: * `OnCreate` - fires when the `Save` [command button]({%slug components/grid/columns/command%}) button for a newly added item is clicked. Cancellable (cancelling it keeps the grid in Insert mode). * `OnUpdate` - fires when the `Save` command button is clicked on an existing item. Cancellable (cancelling it keeps the grid in Edit mode). The model reference is a copy of the original data source item. -* `OnDelete` - fires when the `Delete` command button is clicked. +* `OnDelete` - fires when the `Delete` command button is clicked. You can also display a [delete confirmation dialog]({%slug grid-delete-confirmation%}) before the deletion. * `OnEdit` - fires when the user is about to enter edit mode for an existing row. Cancellable (cancelling it prevents the item from opening for editing). * `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the view data. Cancellable (keeps the grid in Edit/Insert mode). * `OnRead` - fires when the grid needs data - after any data source operation like updating, creating, deleting, filtering, sorting. If you cancel the CUD events, the [OnRead]({%slug components/grid/manual-operations%}) event will not fire. diff --git a/components/treelist/columns/command.md b/components/treelist/columns/command.md index a6bae68a20..9d205ac42f 100644 --- a/components/treelist/columns/command.md +++ b/components/treelist/columns/command.md @@ -46,6 +46,7 @@ There are four built-in commands: * `Add` - initiates the creation of a new item. Can apply to rows as well, to create a child element for the current row. * `Edit` - initiates the inline or popup editing (depending on the TreeListEditMode configuration of the treelist). +* `Delete` - initiates the deletion of an existing item. You can also enable a [delete confirmation dialog]({%slug treelist-delete-confirmation%}). * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited. * `Cancel` - aborts the current operation (edit or insert). diff --git a/components/treelist/editing/built-in-dialogs/delete-confirmation.md b/components/treelist/editing/built-in-dialogs/delete-confirmation.md new file mode 100644 index 0000000000..9c26eccc3d --- /dev/null +++ b/components/treelist/editing/built-in-dialogs/delete-confirmation.md @@ -0,0 +1,179 @@ +--- +title: Delete Confirmation +page_title: TreeList - Delete Confirmation Dialog +description: Enable delete confirmation dialog in TreeList for Blazor. +slug: treelist-delete-confirmation +tags: telerik,blazor,treelist,delete,confirmation,dialog +published: True +position: 3 +--- + +# Delete Confirmation Dialog +The delete confirmation dialog triggers before item deletion. You can enable it by setting the `ConfirmDelete` parameter of the TreeList to `true`. + +>caption Delete Confirmation dialog + +![](../images/treelist-delete-confirmation.gif) + +>caption Enabling of the Delete Confirmation Dialog + +````CSHTML +@* TreeList with enabled Delete Confirmation Dialog *@ + +@using System.ComponentModel.DataAnnotations + + + + + Delete + + + + + + + + +@code { + public List Data { get; set; } + + async Task DeleteItem(TreeListCommandEventArgs args) + { + var item = args.Item as Employee; + + await MyService.Delete(item); + + await GetTreeListData(); + } + + public class Employee + { + public int Id { get; set; } + + [Required] + public string Name { get; set; } + public string EmailAddress { get; set; } + public DateTime HireDate { get; set; } + + public List DirectReports { get; set; } + public bool HasChildren { get; set; } + + public override bool Equals(object obj) + { + if (obj is Employee) + { + return this.Id == (obj as Employee).Id; + } + return false; + } + } + + async Task GetTreeListData() + { + Data = await MyService.Read(); + } + + protected override async Task OnInitializedAsync() + { + await GetTreeListData(); + } + + public static class MyService + { + private static List _data { get; set; } = new List(); + private static int LastId { get; set; } = 1; + + public static async Task> Read() + { + if (_data.Count < 1) + { + for (int i = 1; i < 15; i++) + { + Employee root = new Employee + { + Id = LastId, + Name = $"root: {i}", + EmailAddress = $"{i}@example.com", + HireDate = DateTime.Now.AddYears(-i), + DirectReports = new List(), + HasChildren = true + }; + _data.Add(root); + LastId++; + + for (int j = 1; j < 4; j++) + { + int currId = LastId; + Employee firstLevelChild = new Employee + { + Id = currId, + Name = $"first level child {j} of {i}", + EmailAddress = $"{currId}@example.com", + HireDate = DateTime.Now.AddDays(-currId), + DirectReports = new List(), + HasChildren = true + }; + root.DirectReports.Add(firstLevelChild); + LastId++; + + for (int k = 1; k < 3; k++) + { + int nestedId = LastId; + firstLevelChild.DirectReports.Add(new Employee + { + Id = LastId, + Name = $"second level child {k} of {j} and {i}", + EmailAddress = $"{nestedId}@example.com", + HireDate = DateTime.Now.AddMinutes(-nestedId) + }); ; + LastId++; + } + } + } + } + + return await Task.FromResult(_data); + } + + public static async Task Delete(Employee itemToDelete) + { + RemoveChildRecursive(_data, itemToDelete); + } + + static void RemoveChildRecursive(List items, Employee item) + { + for (int i = 0; i < items.Count(); i++) + { + if (item.Equals(items[i])) + { + items.Remove(item); + + return; + } + else if (items[i].DirectReports?.Count > 0) + { + RemoveChildRecursive(items[i].DirectReports, item); + + if (items[i].DirectReports.Count == 0) + { + items[i].HasChildren = false; + } + } + } + } + } +} +```` + + +## See Also + +* [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline) +* [Live Demo: TreeList PopUp Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup) +* [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell) +* [Live Demo: TreeList Custom Editor Template](https://demos.telerik.com/blazor-ui/treelist/custom-editor) +* [Live Demo: TreeList Custom Edit Form](https://demos.telerik.com/blazor-ui/treelist/editing-custom-form) + diff --git a/components/treelist/editing/built-in-dialogs/overview.md b/components/treelist/editing/built-in-dialogs/overview.md new file mode 100644 index 0000000000..72ea2a3902 --- /dev/null +++ b/components/treelist/editing/built-in-dialogs/overview.md @@ -0,0 +1,28 @@ +--- +title: Overview +page_title: Editing - Built-in Dialogs Overview +description: Enable built-in dialogs in TreeList for Blazor. +slug: components/treelist/features/built-in-dialogs +tags: telerik,blazor,treelist,built,in,dialogs +published: True +previous_url: /treelist/built-in-dialogs +position: 0 +--- + +# TreeList Built-in Dialogs +You can enable built-in dialogs in TreeList to provide an extra step for the end-user before a TreeList operation. + +The TreeList component can use built-in dialogs for: + +* [delete confirmation]({%slug treelist-delete-confirmation%}) - displays a confirmation dialog when the user clicks the "**delete**" command button. + +The default texts of the dialogs are exposed in the [localization]({%slug globalization-localization%}) messages of the component, and you can customize them. + +## See Also + +* [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline) +* [Live Demo: TreeList PopUp Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup) +* [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell) +* [Live Demo: TreeList Custom Editor Template](https://demos.telerik.com/blazor-ui/treelist/custom-editor) +* [Live Demo: TreeList Custom Edit Form](https://demos.telerik.com/blazor-ui/treelist/editing-custom-form) + diff --git a/components/treelist/editing/images/treelist-delete-confirmation.gif b/components/treelist/editing/images/treelist-delete-confirmation.gif new file mode 100644 index 0000000000..2dded2956d Binary files /dev/null and b/components/treelist/editing/images/treelist-delete-confirmation.gif differ diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md index be62d2d01b..f712efb630 100644 --- a/components/treelist/editing/overview.md +++ b/components/treelist/editing/overview.md @@ -27,7 +27,7 @@ List of the available events: * `OnCreate` - fires when the `Save` [command button]({%slug treelist-columns-command%}) button for a newly added item is clicked. Cancellable. * `OnUpdate` - fires when the `Save` command button is clicked on an existing item. Cancellable. The model reference is a copy of the original data source item. -* `OnDelete` - fires when the `Delete` command button is clicked. Cancellable. +* `OnDelete` - fires when the `Delete` command button is clicked. The event is cancellable, and you can also display a [delete confirmation dialog]({%slug treelist-delete-confirmation%}) before the deletion. * `OnEdit` - fires when the user is about to enter edit mode for an existing row. Cancellable. * `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the view data. Cancellable.