Skip to main content

Editing and Validation in Blazor Grid

  • 2 minutes to read

DevExpress Blazor Grid supports multiple edit modes. Use any of these modes to allow users to create, modify, and delete grid rows. In all edit modes, the Grid component validates input data and displays errors if necessary.

Edit Cell (CTP)

In EditCell mode, users can click a data cell to display its in-place editor. When focus moves to another row, the control validates pending user input and saves changes.

Blazor Grid Cell Editing

Read Tutorial: Cell Editing Run Demo: Edit Cell Run Demo: Edit Batch View Example: Enable Batch Data Editing with Entity Framework Core

Edit Forms

In the EditForm or PopupEditForm mode, the Grid displays an inline or pop-up edit form instead of the edited data row. Users can click command buttons to create, modify, and delete grid rows.

Blazor Grid Popup Edit Form

Read Tutorial: Edit Forms Run Demo: Edit Forms

Edit Row

In EditRow mode, the Grid component displays in-place editors in all data cells of the edited row. Users can click command buttons to create, modify, and delete grid rows.

Blazor Grid Inline Edit Row

Read Tutorial: Inline Edit Row Run Demo: Edit Row View Example: Inline Editing

Input Validation

The Grid component validates user input based on data annotation attributes defined in the edit model. Once validation is completed, the component marks editors with colored outlines and displays validation icons. Users can hover the mouse pointer over an error icon to display the corresponding error message within the tooltip.

Validation Icons

Run Demo: Input Validation Read Tutorial: Validate User Input View Example: Custom Validation