docs(grid,treelist):add section and kb for delete confirmation dialog

_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

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).
 

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
+
+<TelerikGrid Data=@MyData Pageable="true" Height="400px"
+             OnDelete="@DeleteHandler" ConfirmDelete="true">
+    <GridColumns>
+        <GridColumn Field=@nameof(SampleData.ID) Title="ID" />
+        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
+        <GridCommandColumn>
+            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@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<SampleData> MyData { get; set; }
+
+    async Task GetGridData()
+    {
+        MyData = await MyService.Read();
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await GetGridData();
+    }
+
+    public static class MyService
+    {
+        private static List<SampleData> _data { get; set; } = new List<SampleData>();
+
+        public static async Task<List<SampleData>> 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)
+

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)
+

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.

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).
 

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
+
+<TelerikTreeList Data="@Data"
+                 OnDelete="@DeleteItem"
+                 Pageable="true" Height="400px" 
+                 ConfirmDelete="true">
+    <TreeListColumns>
+        <TreeListCommandColumn>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+        </TreeListCommandColumn>
+        <TreeListColumn Field="Name" Expandable="true" />
+        <TreeListColumn Field="Id" />
+        <TreeListColumn Field="EmailAddress" />
+        <TreeListColumn Field="HireDate" />
+    </TreeListColumns>
+</TelerikTreeList>
+
+@code {
+    public List<Employee> 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<Employee> 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<Employee> _data { get; set; } = new List<Employee>();
+        private static int LastId { get; set; } = 1;
+
+        public static async Task<List<Employee>> 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<Employee>(),
+                        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<Employee>(),
+                            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<Employee> 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)
+

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)
+

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.