TreeList Validation
The Telerik TreeList for Blazor supports built-in validation that is enabled by default. This article describes how the TreeList validation works and how to customize or disable it.
Make sure to read the TreeList CRUD Operations article first.
Basics
By default, the TreeList validation uses a DataAnnotationValidator and creates an EditContext for the row that is in add or edit mode. When you use inline or in-cell editing, the TreeList renders validation messages in Validation Tooltips on hover of the invalid inputs. In popup edit mode, the TreeList shows a Validation Summary in the popup.
When a row is not in edit mode, the EditContext is null. The TreeList EditContext is a cascading parameter, which can overrides any cascading parameters from parent components, such as an <EditForm> that may wrap the TreeList.
The built-in TreeList validation is not supported with dynamic data such as ExpandoObject, DataTable, or Dictionary.
The Telerik components for Blazor do not perform the actual validation of the model. Validation is managed by the
EditContext. The role of the Telerik components is to callEditContextmethods, subscribe toEditContextevents, retrieve validation messages, and display them. If a validation scenario does not work as expected, check the behavior in a standard Blazor<EditForm>to verify if the issue is related to the Telerik components.
Disable Validation
To disable the built-in TreeList validation:
- Add
<TreeListSettings>as a child tag inside the TreeList. - Add a
<TreeListValidationSettings>tag inside<TreeListSettings>. - Set the
Enabledparameter ofTreeListValidationSettingsto false.
See the example below.
Use Custom Validator
You can validate the TreeList with any validator that uses the EditContext. To change the default validator:
- Add
<TreeListSettings>as a child tag inside the TreeList. - Add a
<TreeListValidationSettings>tag inside<TreeListSettings>. - Define the custom validator in the
<ValidatorTemplate>RenderFragmentinside<TreeListValidationSettings>.
Third party validation tools are not part of Telerik UI for Blazor. Reference the required NuGet packages explicitly.
Example
The example below shows how to:
- Enable and disable validation in the TreeList.
- Validate the user input with a custom validator instead of the default
DataAnnotationsValidator.
Install the Blazored.FluentValidation NuGet package to run the following code and refer to the FluentValidation documentation.
Use Telerik TreeList for Blazor with FluentValidation
@* Requires the Blazored.FluentValidation NuGet package *@
@using Blazored.FluentValidation
@using FluentValidation
@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikTreeList Data="@TreeListData"
IdField="@nameof(Employee.Id)"
ParentIdField="@nameof(Employee.ParentId)"
ConfirmDelete="true"
EditMode="@TreeListEditMode.Inline"
OnCreate="@OnTreeListCreate"
OnUpdate="@OnTreeListUpdate"
Height="400px">
<TreeListSettings>
<TreeListValidationSettings Enabled="@TreeListValidationEnabled">
<ValidatorTemplate>
<FluentValidationValidator Validator="@TreeListFluentValidator" />
</ValidatorTemplate>
</TreeListValidationSettings>
</TreeListSettings>
<TreeListToolBarTemplate>
<TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
<label class="k-checkbox-label">
<TelerikCheckBox @bind-Value="@TreeListValidationEnabled" />
Enable Validation
</label>
</TreeListToolBarTemplate>
<TreeListColumns>
<TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
<TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
<TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
<TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
<TreeListCommandColumn Width="160px">
<TreeListCommandButton Command="Add">Add</TreeListCommandButton>
<TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
<TreeListCommandButton Command="Save" ShowInEdit="true">Save</TreeListCommandButton>
<TreeListCommandButton Command="Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
</TreeListCommandColumn>
</TreeListColumns>
</TelerikTreeList>
@code {
private IEnumerable<Employee>? TreeListData { get; set; }
private EmployeeService TreeListEmployeeService { get; set; } = new();
private FluentProductValidator TreeListFluentValidator = new();
public class FluentProductValidator : AbstractValidator<Employee>
{
public FluentProductValidator()
{
RuleFor(item => item.Name).NotEmpty().MinimumLength(3).MaximumLength(24);
RuleFor(item => item.Salary).NotNull().GreaterThan(0);
RuleFor(item => item.HireDate).NotEmpty().GreaterThanOrEqualTo(DateTime.Today);
}
}
private bool TreeListValidationEnabled { get; set; } = true;
private async Task OnTreeListCreate(TreeListCommandEventArgs args)
{
var createdItem = (Employee)args.Item;
var parentItem = (Employee?)args.ParentItem;
await TreeListEmployeeService.Create(createdItem, parentItem);
TreeListData = await TreeListEmployeeService.Read();
}
private async Task OnTreeListUpdate(TreeListCommandEventArgs args)
{
var updatedItem = (Employee)args.Item;
await TreeListEmployeeService.Update(updatedItem);
TreeListData = await TreeListEmployeeService.Read();
}
protected override async Task OnInitializedAsync()
{
TreeListData = await TreeListEmployeeService.Read();
}
public class Employee
{
public int Id { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public string Notes { get; set; } = string.Empty;
[Required]
public decimal? Salary { get; set; }
[Required]
public DateTime? HireDate { get; set; }
public bool IsDriver { get; set; }
public override bool Equals(object? obj)
{
return obj is Employee && ((Employee)obj).Id == Id;
}
public override int GetHashCode()
{
return base.GetHashCode();
}
}
#region Data Service
public class EmployeeService
{
private List<Employee> Items { get; set; } = new();
private readonly int TreeLevelCount;
private readonly int RootItemCount;
private readonly int ChildItemCount;
private int LastId { get; set; }
private Random Rnd { get; set; } = Random.Shared;
public async Task<int> Create(Employee createdEmployee, Employee? parentEmployee)
{
await SimulateAsyncOperation();
createdEmployee.Id = ++LastId;
createdEmployee.ParentId = parentEmployee?.Id;
Items.Insert(0, createdEmployee);
if (parentEmployee != null)
{
parentEmployee.HasChildren = true;
}
return LastId;
}
public async Task<bool> Delete(Employee deletedEmployee)
{
await SimulateAsyncOperation();
if (Items.Contains(deletedEmployee))
{
DeleteChildren(deletedEmployee.Id);
Items.Remove(deletedEmployee);
if (deletedEmployee.ParentId.HasValue && !Items.Any(x => x.ParentId == deletedEmployee.ParentId.Value))
{
Items.First(x => x.Id == deletedEmployee.ParentId.Value).HasChildren = false;
}
return true;
}
return false;
}
public async Task<List<Employee>> Read()
{
await SimulateAsyncOperation();
return Items;
}
public async Task<DataSourceResult> Read(DataSourceRequest request)
{
return await Items.ToDataSourceResultAsync(request);
}
public async Task<bool> Update(Employee updatedEmployee)
{
await SimulateAsyncOperation();
int originalItemIndex = Items.FindIndex(x => x.Id == updatedEmployee.Id);
if (originalItemIndex != -1)
{
Items[originalItemIndex] = updatedEmployee;
return true;
}
return false;
}
private async Task SimulateAsyncOperation()
{
await Task.Delay(100);
}
private void DeleteChildren(int parentId)
{
List<Employee> children = Items.Where(x => x.ParentId == parentId).ToList();
foreach (Employee child in children)
{
DeleteChildren(child.Id);
}
Items.RemoveAll(x => x.ParentId == parentId);
}
private void PopulateChildren(List<Employee> items, int? parentId, int level)
{
int itemCount = level == 1 ? RootItemCount : ChildItemCount;
for (int i = 1; i <= itemCount; i++)
{
int itemId = ++LastId;
items.Add(new Employee()
{
Id = itemId,
ParentId = parentId,
HasChildren = level < TreeLevelCount,
Name = $"Employee Name {itemId}", // {level}-{i}
Notes = $"Multi-line\nnotes {itemId}",
Salary = Rnd.Next(1_000, 10_000) * 1.23m,
HireDate = DateTime.Today.AddDays(-Rnd.Next(365, 3650)),
IsDriver = itemId % 2 == 0
});
if (level < TreeLevelCount)
{
PopulateChildren(items, itemId, level + 1);
}
}
}
public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2)
{
TreeLevelCount = treeLevelCount;
RootItemCount = rootItemCount;
ChildItemCount = childItemCount;
List<Employee> items = new();
PopulateChildren(items, null, 1);
Items = items;
}
}
#endregion Data Service
}