Grid In-Cell Editing

Updated on Aug 28, 2026

In-cell editing allows users to click Grid data cells and type new values like in Excel. There is no need for command buttons to enter and exit edit mode. Users can quickly move between the editable cells and rows by using keyboard navigation.

The in-cell edit mode provides a different user experience, compared to the inline and popup edit modes. In-cell edit mode can be more convenient for advanced users, fast users, or users who prefer keyboard navigation rather than clicking command buttons.

Make sure to read the Grid CRUD Operations article first.

Basics

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

• Press Tab or Shift + Tab to confirm the current value and edit the next or previous cell.
• Press Enter to confirm the current value and edit the cell below.
• Press ESC to cancel the current change and exit edit mode.
• Click on another cell to confirm the current value and edit the new cell.
• Click outside the Grid to confirm the current value and exit edit mode.
• Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.

Command columns and read-only columns are skipped while tabbing.

Commands

In-cell add, edit, and delete operations use the following command buttons:

• Add
• Delete

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.

Unlike inline editing, the in-cell edit mode does not use Edit, Save, and Cancel command buttons.

Events

Users enter and exit in-cell edit mode cell by cell, so the OnEdit, OnCancel, and OnUpdate events also fire cell by cell.

In in-cell edit mode, the OnAdd and OnCreate events fire immediately one after the other, unless OnAdd is cancelled. This means that:

• The new row is added to the Grid data source before users start editing it.
• Valid default values are recommended.
• Users are always editing existing rows, not adding new ones.
• The InsertedItem property of the Grid state is not used and is always null.
• To add a new row programmatically and put it in edit mode, use the OriginalEditItem, EditItem, and EditField properties of the Grid state.

The above algorithm is different from inline and popup editing where new rows are only added to the data source after users populate them with valid values.

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.

For a complete example of how this feature works, see the following example.

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 cell.

• 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 completes and the component fires OnUpdate.

Delete, Filter, Group, Page, Search, Sort

This section explains what happens when the user tries to perform another data operation, while the component is already in add or edit mode.

• If the validation is satisfied, then editing completes and the component fires OnUpdate.
• If the validation is not satisfied, then editing aborts and the component fires OnCancel.

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

Selection

To enable row selection with in-cell edit mode, use a checkbox column. More information on that can be read in the Row Selection article.

To see how to select the row that is currently in in-cell edit mode without using a <GridCheckboxColumn />, see the Row Selection in Edit with InCell EditMode Knowledge Base article.

Cell selection is not supported with in-cell edit mode.

Examples

Basic

The example below shows how to:

• Implement in-cell 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 in-cell editing configuration

Loading ...

Advanced

The example below shows how to:

• Implement in-cell 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 in-cell editing configuration

Loading ...

See Also

• Live Demo: Grid InCell Editing
• Grid Editor Template
• Start and End Editing through the Grid State
• Grid Selection Documentation
• Blazor Grid