This sample demonstrates CRUD operations in Tree Grid using command column. You can perform CRUD operations as follows,
Edit - To edit record, double click a row or click Edit button from command column after selected a row.Delete - To delete record, click Delete button from command column after selected a row.Update, Cancel -You can save or discard changes by click Update and Cancel button from command column respectively.Task ID | Task Name | Start Date | Duration | Progress | Manage Records |
|---|---|---|---|---|---|
| 1 | Planning | 2/3/2017 | 5 | 100 | |
| 2 | Plan timeline | 2/3/2017 | 5 | 100 | |
| 3 | Plan budget | 2/3/2017 | 5 | 100 | |
| 4 | Allocate resources | 2/3/2017 | 5 | 100 | |
| 5 | Planning complete | 2/7/2017 | 0 | 0 | |
| 6 | Design | 2/10/2017 | 3 | 86 | |
| 7 | Software Specification | 2/10/2017 | 3 | 60 | |
| 8 | Develop prototype | 2/10/2017 | 3 | 100 | |
| 9 | Get approval from customer | 2/13/2017 | 2 | 100 | |
| 10 | Design Documentation | 2/13/2017 | 2 | 100 |
The Tree Grid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. The columns->commands property accepts array of CommandModel object. The predefined command button can be defined by using type property.
The built-in command button are,
Edit DeleteCancelSaveInjecting Module
Tree Grid component features are segregated into individual feature-wise modules. To use commandColumn feature, we need to inject CommandColumnService into the @NgModule.providers section.
More information on the command column configuration can be found in this documentation section.