Example of Inline Editing in Blazor Tree Grid Component
This sample demonstrates CRUD operations in Tree Grid. You can perform CRUD operations as follows,
Add- To add a new record, click Add toolbar button.Edit- To edit a record, double-click a row or click Edit toolbar button after selecting a row.Delete- To delete a record, click Delete toolbar button after selecting a row.Update, Cancel- You can save or discard changes by clicking the Update and Cancel button toolbar respectively.
Task ID | Task Name | Start Date | Start Time | Duration | Progress |
|---|
| 1 | Planning | 3/2/2021 | 10:00 AM | 5 | Open |
| 2 | Plan timeline | 3/4/2021 | 11:30 AM | 5 | In Progress |
| 3 | Plan budget | 3/6/2021 | 12:00 PM | 5 | Started |
| 4 | Allocate resources | 3/8/2021 | 1:30 PM | 5 | Open |
| 5 | Planning complete | 7/10/2021 | 2:00 PM | 1 | Open |
| 6 | Design | 10/12/2021 | 4:00 PM | 3 | In Progress |
| 7 | Software specification | 10/14/2021 | 5:30 PM | 3 | Started |
| 8 | Develop prototype | 10/16/2021 | 6:00 PM | 3 | In Progress |
| 9 | Get approval from customer | 2/18/2021 | 7:30 PM | 2 | In Progress |
| 10 | Design complete | 2/20/2021 | 8:00 PM | 1 | In Progress |
Properties
| Edit Mode |
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
Row mode is enabled for editing by default in this demo. You can begin editing any row by double-clicking it or by clicking the toolbar's Edit button; the currently selected row will be changed to the edited state. You can edit the row values and save the results to the datasource.
More information about edit modes in tree grid can be found in the documentation section.