Blazor Tree Grid Example - Dialog Editing
This sample demonstrates the dialog editing feature in Tree Grid. While editing or adding a record, a dialog pop-up opens to display the edit form.
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 34 | In Progress | Critical |
| 2 | Child task 1 | 8/29/2022 | 1 | Validated | Critical |
| 3 | Child task 2 | 8/30/2022 | 98 | Open | Low |
| 4 | Sub task 1 | 8/29/2022 | 67 | Closed | Normal |
| 5 | Sub task 2 | 8/30/2022 | 14 | Closed | Normal |
| 6 | Sub task 3 | 8/31/2022 | 67 | Closed | Normal |
| 7 | Parent task 2 | 8/29/2022 | 52 | Open | Low |
| 8 | Child task 3 | 8/29/2022 | 1 | Validated | Critical |
| 9 | Child task 4 | 8/30/2022 | 98 | Open | Low |
| 10 | Sub task 4 | 8/29/2022 | 67 | Closed | Normal |
| 11 | Sub task 5 | 8/30/2022 | 14 | Closed | Normal |
| 12 | Sub task 6 | 8/31/2022 | 67 | Closed | Normal |
TreeGridEditSettings can be used to configure CRUD operations in Tree Grid. It also has various modes for manipulating the datasource. The available modes are:
EditMode.RowEditMode.CellEditMode.DialogEditMode.Batch
In this demo, dialog mode is enabled for editing by defining the Mode property as EditMode.Dialog. You can begin editing by double-clicking a row or clicking the Edit button on the toolbar. The currently selected row will be displayed in a dialog where you can change the row values and save the edited data to the datasource.
More information on dialog editing can be found in this documentation section.