Example of Command Column in Javascript Tree Grid Control

All Controls
/
Tree Grid
/
Command Column

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.
More Details...

1
Planning
2/3/20175100
2
Plan timeline
2/3/20175100
3
Plan budget
2/3/20175100
4
Allocate resources
2/3/20175100
5
Planning complete
2/7/201700
6
Design
2/10/2017386
7
Software Specification
2/10/2017360
8
Develop prototype
2/10/20173100
9
Get approval from customer
2/13/20172100
10
Design Documentation
2/13/20172100
11
Design complete
2/14/201700
12
Implementation Phase
2/17/20171166
13
Phase 1
2/17/20171150
14
Implementation Module 1
2/17/20171110
15
Development Task 1
2/17/2017350
16
Development Task 2
2/17/2017350
17
Testing
2/20/201720
18
Bug fix
2/24/201720
19
Customer review meeting
2/26/201720
20
Phase 1 complete
2/27/2017050
21
Phase 2
2/17/20171260
22
Implementation Module 2
2/17/20171290
23
Development Task 1
2/17/2017450
24
Development Task 2
2/17/2017450
25
Testing
2/21/201720
26
Bug fix
2/25/201720
27
Customer review meeting
2/27/201720
28
Phase 2 complete
2/28/2017050
29
Phase 3
2/17/20171130
30
Implementation Module 3
2/17/20171160
31
Development Task 1
2/17/2017350
32
Development Task 2
2/17/2017350
33
Testing
2/20/201720
34
Bug fix
2/24/201720
35
Customer review meeting
2/26/201720
36
Phase 3 complete
2/27/2017050
Description

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 Delete Cancel Save Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use CommandColumn feature, we need to inject Edit module using the TreeGrid.Inject(CommandColumn) method. More information on the command column configuration can be found in this documentation section.