New to Telerik UI for Blazor? Start a free 30-day trial

Grid Inline Editing

Inline Grid editing lets users modify all values on a Grid row. The edit process starts and ends with clicking of command buttons on the respective row. Inline editing can be more intuitive for beginner users, compared to in-cell editing.

Make sure to read the Grid CRUD Operations article first.

Basics

To use inline Grid editing, set the Grid EditMode parameter to GridEditMode.Inline. During inline editing, only one table row is in edit mode at a time. Users can:

Press Tab or Shift + Tab to focus the next or previous editable cell.
Click the Save command button or press Enter to confirm the current row changes and exit edit mode.
Click the Cancel command button or press ESC to cancel the current row changes and exit edit mode.
Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.

Commands

Inline add, edit, and delete operations use the following command buttons:

Add
Delete
Edit
Save
Cancel

Without using the above command buttons, the application can:

Manage add or edit mode programmatically through the Grid state.
Modify data items directly in the Grid data source. Rebind the Grid afterwards.

In inline edit mode, the Grid commands execute row by row and the corresponding Grid events also fire row by row. This is similar to popup editing and unlike in-cell editing, where commands and events relate to cells.

When validation is not satisfied, clicking the Save, Delete or Add command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.

Integration with Other Features

Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the common information on this topic for all edit modes.

Add, Edit

This section explains what happens when the component is already in add or edit mode, and the user tries to add or edit another row.

If the validation is not satisfied, the component blocks the user action until they complete or cancel the current add or edit operation.
If the validation is satisfied, then editing aborts and the component fires OnCancel.

If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires OnCancel.

Examples

Basic

The example below shows how to:

Implement inline Grid CRUD operations with the simplest and minimal required setup.
Use the OnCreate, OnDelete and OnUpdate events to make changes to the Grid data source.
Rebind the Grid automatically through the OnRead event after the create, delete, or update operation is complete. When using the Data parameter, you must either query the data source again, or modify the local Data collection manually.
Use DataAnnotations validation for some model class properties.

Basic Grid inline editing configuration

@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid OnRead="@OnGridRead"
             TItem="@Product"
             EditMode="@GridEditMode.Inline"
             OnCreate="@OnGridCreate"
             OnDelete="@OnGridDelete"
             OnUpdate="@OnGridUpdate">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <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" />
        <GridCommandColumn Width="180px">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private ProductService GridProductService { get; set; } = new();

    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
}

Advanced