Grids
Example of Command Column in ASP.NET Core Tree Grid Control
This sample demonstrates CRUD operations in TreeGrid 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 | Manage Records |
---|---|---|---|---|
1 | Planning | 3/2/2017 | 5 | |
2 | Plan timeline | 3/2/2017 | 5 | |
3 | Plan budget | 3/2/2017 | 5 | |
4 | Allocate resources | 3/2/2017 | 5 | |
5 | Planning complete | 7/2/2017 | 1 | |
6 | Design | 10/2/2017 | 3 | |
7 | Software Specification | 10/2/2017 | 3 | |
8 | Develop prototype | 10/2/2017 | 3 | |
9 | Get approval from customer | 2/13/2017 | 2 | |
10 | Design complete | 2/14/2017 | 1 | |
11 | Implementation Phase | 2/17/2017 | 11 | |
12 | Phase 1 | 2/17/2017 | 11 | |
13 | Implementation Module 1 | 2/17/2017 | 11 | |
14 | Development Task 1 | 2/17/2017 | 3 | |
15 | Development Task 2 | 2/17/2017 | 3 | |
16 | Testing | 2/20/2017 | 2 | |
17 | Bug fix | 2/24/2017 | 2 | |
18 | Customer review meeting | 2/26/2017 | 2 | |
19 | Phase 1 complete | 2/27/2017 | 2 | |
20 | Phase 2 | 2/17/2017 | 12 | |
21 | Implementation Module 2 | 2/17/2017 | 12 | |
22 | Development Task 1 | 2/17/2017 | 4 | |
23 | Development Task 2 | 2/17/2017 | 4 | |
24 | Testing | 2/21/2017 | 2 | |
25 | Bug fix | 2/25/2017 | 2 | |
26 | Customer review meeting | 2/27/2017 | 2 | |
27 | Phase 2 complete | 2/28/2017 | 2 | |
28 | Phase 3 | 2/17/2017 | 11 | |
29 | Implementation Module 3 | 2/17/2017 | 11 | |
30 | Development Task 1 | 2/17/2017 | 3 | |
31 | Development Task 2 | 2/17/2017 | 3 | |
32 | Testing | 2/20/2017 | 2 | |
33 | Bug fix | 2/24/2017 | 2 | |
34 | Customer review meeting | 2/26/2017 | 2 | |
35 | Phase 3 complete | 2/27/2017 | 2 |
The TreeGrid 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
Delete
Cancel
Save
More information on the data binding can be found in this documentation section.