Delete Confirmation Dialog
This article provides information on how to enable the built-in delete confirmation dialog and how you can create a custom dialog:
Basics
The built-in delete confirmation dialog triggers before item deletion. You can enable it by setting the ConfirmDelete parameter of the TreeList to true.
Enabling of the Delete Confirmation Dialog
@* 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="@SvgIcon.Trash">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;
}
}
}
}
}
}
Custom Delete Confirmation Dialog
To customize the appearance and behavior of the delete confirmation dialog, use one of the following options:
Localization - this approach is useful if you want to change just the text of the built-in delete confirmation dialog elements. It does not allow adding item details to the dialog text.
Predefined dialogs (
DialogFactory) - this option is useful if you want to change the dialog text and include some details for the item the user tries to delete (for example, record name).Dialog Component - this solution allows you to fully customize the rendering and appearance of the dialog. You may set the desired
ThemeColorand add any content there, be that custom text, HTML elements or other components.
Read more about customizing the delete confirmation dialog...