Example of Inline Editing in Javascript Tree Grid Control

All Controls
/
Tree Grid
/
Inline Editing

This sample demonstrates CRUD operations in Tree Grid. You can perform CRUD operations as follows,

  • Add - To add new record, click Add toolbar button.
  • Edit - To edit record, double click a row or click toolbar Edit button after selected a row.
  • Delete - To delete record, click toolbar Delete button after selected a row.
  • Update, Cancel - You can save or discard changes by click toolbar Update and Cancel button respectively.

Also select the edit mode as Cell or Row from property panel to change the mode of editing.

More Details...

1
Planning
2/3/20175
2
Plan timeline
2/3/20175
3
Plan budget
2/3/20175
4
Allocate resources
2/3/20175
5
Planning complete
2/7/20170
6
Design
2/10/20173
7
Software Specification
2/10/20173
8
Develop prototype
2/10/20173
9
Get approval from customer
2/13/20172
10
Design Documentation
2/13/20172
11
Design complete
2/14/20170
12
Implementation Phase
2/17/201711
13
Phase 1
2/17/201711
14
Implementation Module 1
2/17/201711
15
Development Task 1
2/17/20173
16
Development Task 2
2/17/20173
17
Testing
2/20/20172
18
Bug fix
2/24/20172
19
Customer review meeting
2/26/20172
20
Phase 1 complete
2/27/20170
21
Phase 2
2/17/201712
22
Implementation Module 2
2/17/201712
23
Development Task 1
2/17/20174
24
Development Task 2
2/17/20174
25
Testing
2/21/20172
26
Bug fix
2/25/20172
27
Customer review meeting
2/27/20172
28
Phase 2 complete
2/28/20170
29
Phase 3
2/17/201711
30
Implementation Module 3
2/17/201711
31
Development Task 1
2/17/20173
32
Development Task 2
2/17/20173
33
Testing
2/20/20172
34
Bug fix
2/24/20172
35
Customer review meeting
2/26/20172
36
Phase 3 complete
2/27/20170
Edit Mode
Description

The Tree Grid supports CRUD operations. This CRUD operations can be configured in Tree Grid using editSettings. Also, it has different modes to manipulate the datasource. The available modes are, Row Cell Dialog In this demo, Row mode is enabled for editing by default. You can start editing any row by double clicking on it or clicking on toolbar’s Edit button, then the currently selected row will be changed to edited state. You can change the row values and save edited data to the datasource. We have also provided an option in property panel to select the edit mode as Cell or Row to change mode of editing. Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject Edit module using the TreeGrid.Inject(Edit) method. More information about Edit Modes can be found in this documentation section.