Planned
Last Updated: 04 Mar 2026 08:51 by ADMIN
Scheduled for 2026 Q2
Yaowapar
Created on: 04 Mar 2026 08:47
Category: Grid
Type: Bug Report
1
Clicking blank area inside in-cell editable Grid no longer fires OnUpdate

How to reproduce:

  1. Go to https://demos.telerik.com/blazor-ui/grid/editing-incell
  2. Go to the last Grid page, which has empty space below the last table row.
  3. Open any Grid cell for editing.
  4. Click on the empty space in the Grid below the last table row.
  5. The Grid does not exit edit mode like it should.

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
}

 

0 comments