Example of Celledittype Functional in React Tree Grid Component

/
/
EditType

This sample demonstrates the supported cell edit types of Tree Grid columns. The list of cell edit types are as follows,

  • NumericTextBox component for integers, double, and decimal data types.
  • TextBox component for string data type.
  • DropDownList component for list data type.
  • DatePicker component for date data type.
  • DateTimePicker component for dateTime data type.
  • Checkbox component for boolean data type
More Details...

1
Planning
2/3/2017 12:00 AM5100Normal
2
Plan timeline
2/3/2017 12:00 AM5100Normal
3
Plan budget
2/3/2017 12:00 AM5100Low
4
Allocate resources
2/3/2017 12:00 AM5100Critical
5
Planning complete
2/7/2017 12:00 AM00Low
6
Design
2/10/2017 12:00 AM386High
7
Software Specification
2/10/2017 12:00 AM360Normal
8
Develop prototype
2/10/2017 12:00 AM3100Critical
9
Get approval from customer
2/13/2017 12:00 AM2100Low
10
Design Documentation
2/13/2017 12:00 AM2100High
11
Design complete
2/14/2017 12:00 AM00Normal
12
Implementation Phase
2/17/2017 12:00 AM1166Normal
13
Phase 1
2/17/2017 12:00 AM1150High
14
Implementation Module 1
2/17/2017 12:00 AM1110Normal
15
Development Task 1
2/17/2017 12:00 AM350High
16
Development Task 2
2/17/2017 12:00 AM350Low
17
Testing
2/20/2017 12:00 AM20Normal
18
Bug fix
2/24/2017 12:00 AM20Critical
19
Customer review meeting
2/26/2017 12:00 AM20High
20
Phase 1 complete
2/27/2017 12:00 AM050Low
21
Phase 2
2/17/2017 12:00 AM1260High
22
Implementation Module 2
2/17/2017 12:00 AM1290Critical
23
Development Task 1
2/17/2017 12:00 AM450Normal
24
Development Task 2
2/17/2017 12:00 AM450Critical
25
Testing
2/21/2017 12:00 AM20High
26
Bug fix
2/25/2017 12:00 AM20Low
27
Customer review meeting
2/27/2017 12:00 AM20Critical
28
Phase 2 complete
2/28/2017 12:00 AM050Normal
29
Phase 3
2/17/2017 12:00 AM1130Normal
30
Implementation Module 3
2/17/2017 12:00 AM1160High
31
Development Task 1
2/17/2017 12:00 AM350Low
32
Development Task 2
2/17/2017 12:00 AM350Normal
33
Testing
2/20/2017 12:00 AM20Critical
34
Bug fix
2/24/2017 12:00 AM20High
35
Customer review meeting
2/26/2017 12:00 AM20Normal
36
Phase 3 complete
2/27/2017 12:00 AM050Critical
Description

The columns.editType is used to customize the edit type of the particular column. You can set the columns editType based on data type of the column.

In this sample, we show the following editTypes for the Tree Grid columns

  • NumericTextBox
  • TextBox
  • DropDownList
  • DatePicker
  • DateTimePicker
  • Checkbox

Injecting Module:

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

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