How to reproduce:
The regression was introduced in version 12.2.0. The last version that works correctly is 12.0.0.
The possible workarounds are:
@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid @ref="@GridRef"
OnRead="@OnGridRead"
TItem="@Product"
EditMode="@GridEditMode.Incell"
OnCreate="@OnGridCreate"
OnDelete="@OnGridDelete"
OnUpdate="@OnGridUpdate"
Height="600px">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
<TelerikTextBox @bind-Value="@dataItem.Name" />
</span>
</EditorTemplate>
</GridColumn>
@* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
<GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
<GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
<TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
</span>
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="180px">
<GridCommandButton Command="Delete">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private ProductService GridProductService { get; set; } = new();
private async Task OnGridCellFocusOut(string field)
{
await Task.Delay(100);
if (GridRef is null)
{
return;
}
GridState<Product> gridState = GridRef.GetState();
Product? editItem = gridState.EditItem as Product;
if (editItem is null)
{
return;
}
GridCommandEventArgs args = new GridCommandEventArgs()
{
Field = field,
Item = editItem
};
await OnGridUpdate(args);
gridState.EditField = default;
gridState.EditItem = default!;
gridState.OriginalEditItem = default!;
await GridRef.SetStateAsync(gridState);
}
private async Task OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
await GridProductService.Create(createdItem);
}
private async Task OnGridDelete(GridCommandEventArgs args)
{
var deletedItem = (Product)args.Item;
await GridProductService.Delete(deletedItem);
}
private async Task OnGridRead(GridReadEventArgs args)
{
DataSourceResult result = await GridProductService.Read(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
private async Task OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
await GridProductService.Update(updatedItem);
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
public decimal? Price { get; set; }
public int Quantity { get; set; }
[Required]
public DateTime? ReleaseDate { get; set; }
public bool Discontinued { get; set; }
}
#region Data Service
public class ProductService
{
private List<Product> Items { get; set; } = new();
private int LastId { get; set; }
public async Task<int> Create(Product product)
{
await SimulateAsyncOperation();
product.Id = ++LastId;
Items.Insert(0, product);
return LastId;
}
public async Task<bool> Delete(Product product)
{
await SimulateAsyncOperation();
if (Items.Contains(product))
{
Items.Remove(product);
return true;
}
return false;
}
public async Task<List<Product>> Read()
{
await SimulateAsyncOperation();
return Items;
}
public async Task<DataSourceResult> Read(DataSourceRequest request)
{
return await Items.ToDataSourceResultAsync(request);
}
public async Task<bool> Update(Product product)
{
await SimulateAsyncOperation();
int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
if (originalItemIndex != -1)
{
Items[originalItemIndex] = product;
return true;
}
return false;
}
private async Task SimulateAsyncOperation()
{
await Task.Delay(100);
}
public ProductService(int itemCount = 5)
{
Random rnd = Random.Shared;
for (int i = 1; i <= itemCount; i++)
{
Items.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Description = $"Multi-line\ndescription {LastId}",
Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
Discontinued = LastId % 2 == 0
});
}
}
}
#endregion Data Service
}
There is an undocumented breaking change in the selection behavior of the v13.0.0 TreeView component that prevents us from upgrading from v12.3.0.
In v12.3.0, selecting a TreeView checkbox does change the TreeView item selection or trigger the selection change events. In v13.0.0, checking an item does also change the selection. The v12.3.0 behavior is important for our implementation because selecting a TreeView item in our application fetches data from a database and we do not want the performance overhead of those calls when checking an item---we want the user to be able to select multiple items and only then explicitly fetch the data for all of them.
I've created a minimal example here: https://blazorrepl.telerik.com/cqYdEePd40Zq3ava43. You can see the behavior differences when switching between versions.
Please let me know if there's any additional information we can provide. A workaround to this behavior would be appreciated. Thank you!