Grid Inline Editing

Updated on Aug 28, 2026

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 have no effect, but users can still navigate between all input components in the row to complete the editing.

New Row Position

You can control whether a newly added item appears at the top or bottom of the Grid. Use the NewRowPosition parameter to specify the position.

The NewRowPosition parameter accepts values from the GridNewRowPosition enum:

• Top (default)—Inserts the new item at the top of the view.
• Bottom—Inserts the new item at the bottom of the view.

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.

Delete, Filter, Group, Page, Search, Sort

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.

Deleting items that are currently in edit mode fires OnDelete with a cloned data item instance.

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. Item deletion relies on Delete command buttons and the OnDelete handler receives one data item in its event argument. When using the GridToolBarDeleteTool with multiple row selection, the OnDelete handler may receive multiple data items for deletion.
• 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

Loading ...

Advanced

The example below shows how to:

• Implement inline Grid CRUD operations with all available events and various built-in customizations.
• Use the OnCreate, OnDelete and OnUpdate events to make changes to the Grid data source. Item deletion relies on Delete command buttons and the OnDelete handler receives one data item in its event argument. When using the GridToolBarDeleteTool with multiple row selection, the OnDelete handler may receive multiple data items for deletion.
• Use the OnModelInit event to provide model instances with some default values before add and edit operations start.
• Use the OnAdd event to provide some default values before add operations start.
• Use the NewRowPosition parameter to set there new rows are added to the existing data.
• Reload the Grid Data after making changes to the data source. When using the Grid OnRead event, the component will fire OnRead and rebind automatically.
• Apply the user changes to the Grid Data parameter to spare one read request to the database.
• Use DataAnnotations validation for the Name and ReleaseDate properties.
• Define the Id column as readonly with Editable="false".
• Customize the Description and Discontinued column editors without using an EditorTemplate.
• Render the Delete command button conditionally if Discontinued is true.
• Confirm Delete commands with the built-in Grid Dialog. You can also intercept item deletion with a separate Dialog or a custom popup.
• Cancel the OnAdd and OnEdit events conditionally, so that the Grid does not go into edit mode.
• Cancel the OnCancel event conditionally, so that the Grid remains in edit mode and the user doesn't lose their unsaved changes.

Advanced Grid inline editing configuration

Loading ...

See Also

• Live Demo: Grid Inline Editing
• Grid Editor Template
• Start and End Editing through the Grid State
• Blazor Grid