I recently upgraded my project to Radzen 10.0.3 and noticed some odd behavior in the RadzenCustomValidator when used in conjunction with a RadzenDropDown.
Namely the Validate function will fire before the bound value changes and indicate that a field is invalid even when a proper selection is made. If a different selection is made, the validator will then have the previously selected value. This appears only to affect Custom Validators when they are paired with a RadzenDropDown as shown below.
Are there any suggestions to work around this? Below is a minimal reproduceable example. For reference, I downgraded to 7.3.4 and the Custom Validator behaved as expected.
@page "/"
@rendermode InteractiveServer
<RadzenDataGrid Data="orders" @ref="ordersGrid">
<HeaderTemplate>
<RadzenButton Icon="add_circle" Click="InsertRow"></RadzenButton>
</HeaderTemplate>
<Columns>
<RadzenDataGridColumn Property="CountryId" Title="Country">
<EditTemplate Context="item">
<RadzenDropDown Data="countries"
@bind-Value="item.CountryId"
TextProperty="Name"
Name="CountryIdDropDown"
ValueProperty="Id"></RadzenDropDown>
<RadzenCustomValidator Component="CountryIdDropDown" Validator="validateCountry" Text="Select a Valid Country"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn Property="Name" Title="Name">
<EditTemplate Context="item">
<RadzenTextBox @bind-Value="item.Name" Name="orderName"></RadzenTextBox>
<RadzenCustomValidator Validator="validatedName" Component="orderName" Text="Enter a Valid Name"></RadzenCustomValidator>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
<EditTemplate Context="order">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(order))" aria-label="Save"/>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@((args) => CancelEdit(order))" aria-label="Cancel"/>
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Size="ButtonSize.Medium" Shade="Shade.Lighter" class="rz-my-1 rz-ms-1" Click="@(args => DeleteRow(order))" aria-label="Delete" />
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code{
Order? editItem = null;
RadzenDataGrid<Order> ordersGrid;
async Task SaveRow(Order order)
{
await ordersGrid.UpdateRow(order);
}
void CancelEdit(Order order)
{
ordersGrid.CancelEditRow(order);
}
async Task DeleteRow(Order order)
{
if (orders.Contains(order))
{
orders.Remove((order));
await ordersGrid.Reload();
}
else
{
ordersGrid.CancelEditRow(order);
await ordersGrid.Reload();
}
}
async Task InsertRow()
{
var order = new Order();
editItem = order;
await ordersGrid.InsertRow(order);
}
public class Order
{
public int? CountryId { get; set; } = null;
public string Name { get; set; } = string.Empty;
}
public List<Order> orders =
[
new Order(){ CountryId = 1, Name = "Test Order1"},
new Order(){ CountryId = 2, Name = "Test Order2"},
new Order(){ CountryId = 3, Name = "Test Order2"},
new Order(){ CountryId = 1, Name = "Test Order4"}
];
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
}
public List<Country> countries =
[
new Country() { Id = 1, Name = "USA"},
new Country(){ Id = 2, Name = "Canada"},
new Country(){ Id = 3, Name = "Mexico"},
];
bool validateCountry()
{
if (editItem.CountryId == null || editItem.CountryId == 0)
return false;
return true;
}
bool validatedName()
{
if (editItem.Name.Length < 10)
return false;
return true;
}
}