Editing and Validation in Blazor TreeList

• Dec 03, 2024
• 2 minutes to read

DevExpress Blazor TreeList allows users to add, modify, and delete rows. You can enable one of three row edit modes: Edit Cell, Edit Form, or Edit Row. In all three modes, the TreeList component can validate user input and display errors.

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: Implement Batch Data Editing Using Entity Framework Core

Edit Forms

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

Read Tutorial: Edit Forms Run Demo: Edit Forms

Edit Row

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

Read Tutorial: Inline Edit Row Run Demo: Edit Row

Input Validation

The TreeList component validates user input based on data annotation attributes defined in the data model. If validation fails, the component marks corresponding editors with colored outlines or displays validation icons. Users can hover the mouse pointer over an error icon to display the error message in a tooltip.

Read Tutorial: Validate User Input Run Demo: Input Validation