<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
             Height="500px" AutoGenerateColumns="true" Pageable="true"
             OnDelete="@DeleteItem">
    <GridColumns>
        <GridAutoGeneratedColumns />

        <GridCommandColumn Width="100px">
            <GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {
    //for the confirmation - see the OnClick handler on the Delete button
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task ConfirmDelete(GridCommandEventArgs e)
    {
        Product productToDelete = e.Item as Product;
        string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
        string confirmTitle = "Confirm Deletion!";
        //the actual confirmation itself
        bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
        e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
    }

    // only sample data operations follow

    public List<Product> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        Console.WriteLine("DELETING ITEM");
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

<TelerikGrid @ref="@GridInlineRef"
             Data="@GridInlineData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAddEdit"
             OnEdit="@OnGridAddEdit"
             OnCreate="@OnGridInlineCreate"
             OnUpdate="@OnGridInlineUpdate"
             OnRowClick="@OnGridRowClick">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikTextBox @ref="@NameTextBoxRef" @bind-Value="@editItem.Name" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Price)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikNumericTextBox @ref="@PriceNumericTextBoxRef" @bind-Value="@editItem.Price" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Stock)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikNumericTextBox @ref="@StockNumericTextBoxRef" @bind-Value="@editItem.Stock" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridInlineRef { get; set; }
    private TelerikTextBox? NameTextBoxRef { get; set; }
    private TelerikNumericTextBox<decimal?>? PriceNumericTextBoxRef { get; set; }
    private TelerikNumericTextBox<int>? StockNumericTextBoxRef { get; set; }
    private string EditFieldToFocus { get; set; } = string.Empty;

    private List<Product> GridInlineData { get; set; } = new List<Product>();

    private void OnGridAddEdit(GridCommandEventArgs args)
    {
        EditFieldToFocus = nameof(Product.Stock);
    }

    private async Task OnGridRowClick(GridRowClickEventArgs args)
    {
        EditFieldToFocus = args.Field;
        var itemToEdit = (Product)args.Item;

        args.ShouldRender = true;

        if (GridInlineRef != null)
        {
            var gridState = GridInlineRef.GetState();

            gridState.InsertedItem = null!;
            gridState.OriginalEditItem = itemToEdit;
            gridState.EditItem = itemToEdit.Clone();

            await GridInlineRef.SetStateAsync(gridState);
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!string.IsNullOrEmpty(EditFieldToFocus))
        {
            await Task.Delay(200);

            switch (EditFieldToFocus)
            {
                case nameof(Product.Name):
                    if (NameTextBoxRef != null)
                    {
                        await NameTextBoxRef.FocusAsync();
                    }
                    break;
                case nameof(Product.Price):
                    if (PriceNumericTextBoxRef != null)
                    {
                        await PriceNumericTextBoxRef.FocusAsync();
                    }
                    break;
                case nameof(Product.Stock):
                    if (StockNumericTextBoxRef != null)
                    {
                        await StockNumericTextBoxRef.FocusAsync();
                    }
                    break;
                default:
                    break;
            }

            EditFieldToFocus = string.Empty;
        }
    }

    #region Programmatic Inline Editing

    private async Task InlineAdd()
    {
        var gridState = GridInlineRef!.GetState();

        gridState.InsertedItem = new Product();
        gridState.InsertedItem.Name = "New value";
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    private async Task InlineEdit()
    {
        if (GridInlineData.Any())
        {
            var gridState = GridInlineRef!.GetState();

            gridState.InsertedItem = null!;
            gridState.OriginalEditItem = GridInlineData.First();
            gridState.EditItem = GridInlineData.First().Clone();
            gridState.EditItem.Name = "Updated inline value";

            EditFieldToFocus = nameof(Product.Price);

            await GridInlineRef.SetStateAsync(gridState);
        }
    }

    private async Task InlineCancel()
    {
        var gridState = GridInlineRef!.GetState();

        gridState.InsertedItem = null!;
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    private async Task InlineUpdate()
    {
        var gridState = GridInlineRef!.GetState();

        if (gridState.EditItem != null)
        {
            OnGridInlineUpdate(new GridCommandEventArgs()
            {
                Item = gridState.EditItem
            });
        }
        else if (gridState.InsertedItem != null)
        {
            OnGridInlineCreate(new GridCommandEventArgs()
            {
                Item = gridState.InsertedItem
            });
        }

        gridState.InsertedItem = null!;
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    #endregion Programmatic Inline Editing

    #region Grid Inline Editing Handlers

    private void OnGridInlineUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var index = GridInlineData.FindIndex(i => i.Id == updatedItem.Id);
        if (index != -1)
        {
            GridInlineData[index] = updatedItem;
        }
    }

    private void OnGridInlineCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;
        createdItem.Id = Guid.NewGuid();
        GridInlineData.Insert(0, createdItem);
    }

    #endregion Grid Inline Editing Handlers

    #region Data Generation and Model

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 3; i++)
        {
            GridInlineData.Add(new Product()
            {
                Id = Guid.NewGuid(),
                Name = $"Product {i}",
                Price = Random.Shared.Next(1, 100) * 1.23m,
                Stock = (short)Random.Shared.Next(0, 1000)
            });
        }
    }

    public class Product
    {
        public Guid Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal? Price { get; set; }
        public int Stock { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool InProduction { get; set; }

        public Product Clone()
        {
            return new Product()
            {
                Id = Id,
                Name = Name,
                Price = Price,
                Stock = Stock,
                ReleaseDate = ReleaseDate,
                InProduction = InProduction
            };
        }
    }

    #endregion Data Generation and Model
}

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}