Example of Batch Editing in React Tree Grid Component

All Controls
/
Treegrid
/
Batch

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 cell
  • 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
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
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.

  • Row
  • Cell
  • Dialog
  • Batch

In this demo, Batch mode is enabled for editing by defining editSettings.mode as Batch with editSettings.newRowPosition as Below. You can start editing by double clicking a cell and can change the cell value. The edited cell will be highlighted while navigating to a new cell, so that you know which cells had been edited. You can bulk save the edited data to the datasource by click on the toolbar's update button.

Injecting Module:

Tree Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject Edit module into the services.

More information on the selection configuration can be found in this documentation section.