Example of Inline Editing in Blazor DataGrid Component

DataGrid / Editing / Inline Editing

This sample shows how to use the inline or normal editing mode in DataGrid to perform CRUD operations.

1 of 6 pages (70 items)

The Blazor DataGrid Normal editing features allow you to edit the currently selected record by changing the state of the corresponding record to edit. You can carry out the following CRUD operations:

  • Edit - To edit record, double click a row or click toolbar Edit button after selecting a row.
  • Delete - To delete record, click toolbar Delete button after selecting a row.
  • Update - To save the edited changes, click toolbar Update button.
  • Cancel - To discard the edited changes, click toolbar Cancel button.

The CRUD operations in DataGrid can be configured using the GridEditSettings component. Any one of the columns should be defined as a primary key using the GridColumn component's IsPrimaryKey property. It also has various modes for manipulating the datasource.

The modes that are available are,

  • Dialog
  • Batch

In this sample, the ShowAddNewRow property in the GridEditSettings has been enabled. This property guarantees the continuous display of a new blank row within the grid content, simplifying the process of adding new records effortlessly.

By default, a new row will be added at the top of the DataGrid. You can change it by setting the NewRowPosition to Bottom in GridEditSettings.

More information about the Normal editing feature can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE