Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

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.

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 or displays validation icons. Users can hover the mouse pointer over an error icon to display the corresponding error message within the tooltip.

Blazor Grid Validation in Cell Editors

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