@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
}

 private async Task OnBeforeExcelExport(GridBeforeExcelExportEventArgs args)
 {
     await Task.CompletedTask;

     // Loop through all columns and fix the footer aggregate values
     // Replace the default "Sum: 1234.56" text with just the decimal number
     foreach (var column in args.Columns)
     {
         if (column.HasAggregate)
         {
             // Set the number format for the column so Excel treats it as a number
             column.Aggregate.Field.Value == "MyNewValue";
         }
     }
 }

Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
System.InvalidCastException: Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
at Telerik.Blazor.Components.Common.TableGridBase`2.LoadSearchFilter(IFilterDescriptor descriptor)
at Telerik.Blazor.Components.TelerikGrid`1.SetStateInternalAsync(GridState`1 state)
at Telerik.Blazor.Components.TelerikGrid`1.InvokeOnStateInit()
at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'MYsaCsOgfpbyHeO0xNFpA7ViPHNUC6rpc1K9eIwVR5Y'.
System.InvalidCastException: Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
at Telerik.Blazor.Components.Common.TableGridBase`2.LoadSearchFilter(IFilterDescriptor descriptor)
at Telerik.Blazor.Components.TelerikGrid`1.SetStateInternalAsync(GridState`1 state)
at Telerik.Blazor.Components.TelerikGrid`1.InvokeOnStateInit()
at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

            <div style="padding: 0; width: @(ShowSidePanel ? "65%" : "99%")" tabindex="0" @onkeydown="@(OnKeyPress)">
                <TelerikGrid TItem="IncomingInvoiceGridItemViewModel"
                             @ref="GridRef"
                             Class="admin-grid"
                             Height="@OverviewHeight"
                             RowHeight="50"
                             Pageable="false"
                             PageSize="PageSize"
                             FilterMode="@GridFilterMode.FilterMenu"
                             Sortable="true"
                             Resizable="true"
                             Reorderable="true"
                             ShowColumnMenu="true"
                             ScrollMode="@GridScrollMode.Virtual"
                             SelectionMode="@GridSelectionMode.Single"
                             OnStateInit="@OnStateInit_SetStateAsync"
                             OnStateChanged="@OnStateChanged_SaveStateAsync"
                             SelectedItemsChanged="@OnSelectedItemsChanged_LoadPdf"
                             OnRead="@OnRead_UpdateFilteredItems">
                    <GridSettings>
                        <GridColumnMenuSettings Lockable="false" />
                    </GridSettings>
...
<!-- aggregates, columns and noDataTemplate omitted -->
...
                </TelerikGrid>
            </div>

<table class="table">
    <tr>
        <td class="table-active" style="width: 40px; text-align: center"><input type="checkbox" /> </td>
        <td>test</td>
    </tr>
</table>