Example of Drag And Drop Functional in React Gantt Component

All Controls
/
Gantt
/
DragAndDrop

This sample demonstrates the Gantt component with the row drag and drop feature. You can rearrange the gantt rows by using drag icon in left side of gantt column. Here you can perform drag and drop the gantt rows in to required position.

More Details...

1
Product concept
4/2/20254/4/20253 days34
2
Define the product usage
4/2/20254/2/20251 day30
3
Define the target audience
4/2/20254/3/20252 days40
4
Prepare product sketch and notes
4/3/20254/4/20252 days302FS
5
Concept approval
4/4/20254/4/20250 days03FS,4FS
6
Market research
4/7/20254/16/20258 days25
7
Demand analysis
4/7/20254/10/20254 days15
8
Customer strength
4/7/20254/10/20254 days305FS
9
Market opportunity analysis
4/7/20254/10/20254 days05FS
10
Competitor analysis
4/11/20254/16/20254 days307FS,8FS
11
Product strength analysis
4/11/20254/16/20254 days409FS
12
Research completed
4/16/20254/16/20250 days3010FS
13
Product design and development
4/17/20255/13/202519 days31
14
Functionality design
4/17/20254/22/20254 days3012FS
15
Quality design
4/17/20254/21/20253 days4012FS
16
Define reliability
4/22/20254/25/20254 days3015FS
17
Identifying raw materials
4/22/20254/23/20252 days015FS
18
Define cost plan
4/24/20254/28/20253 days3517FS
19
Estimate manufacturing cost
4/24/20254/28/20253 days4017FS
20
Estimate selling cost
4/24/20254/28/20253 days3017FS
21
Development of final design
4/29/20255/13/202511 days32
22
Develop dimensions and design
4/29/20255/2/20254 days3019FS,20FS
23
Develop designs to meet industry
5/5/20255/7/20253 days4022FS
24
Include all the details
5/8/20255/13/20254 days3023FS
25
CAD - Computer Aided Design
5/14/20255/16/20253 days024FS
26
CAM - Computer Aided Manufacturing
5/19/20255/22/20254 days3025FS
27
Finalize the design
5/22/20255/22/20250 days4026FS
28
Prototype testing
5/23/20255/28/20254 days3027FS
29
Include feedback
5/23/20255/28/20254 days028SS
30
Manufacturing
5/29/20256/4/20255 days3028FS,29FS
31
Assembling material into finished goods
6/5/20256/11/20255 days4030FS
32
Final product development
6/12/20256/20/20257 days17
33
Important improvement
6/12/20256/16/20253 days031FS
34
Customer testing and feedback
6/17/20256/20/20254 days3033FS
35
Final product development
6/23/20256/26/20254 days30
36
Important improvement
6/23/20256/26/20254 days3034FS
37
Address any unforeseen issues
6/23/20256/26/20254 days3036SS
38
Finalize the product
6/27/20257/8/20258 days15
39
Branding the product
6/27/20257/2/20254 days3037FS
40
Marketing and presales
7/3/20257/8/20254 days039FS
Product concept
Define the product usage
Define the target audience
Prepare product sketch and notes
Concept approval
Market research
Demand analysis
Customer strength
Market opportunity analysis
Competitor analysis
Product strength analysis
Research completed
Product design and development
Functionality design
Quality design
Define reliability
Identifying raw materials
Define cost plan
Estimate manufacturing cost
Estimate selling cost
Development of final design
Develop dimensions and design
Develop designs to meet industry
Include all the details
CAD - Computer Aided Design
CAM - Computer Aided Manufacturing
Finalize the design
Prototype testing
Include feedback
Manufacturing
Assembling material into finished goods
Final product development
Important improvement
Customer testing and feedback
Final product development
Important improvement
Address any unforeseen issues
Finalize the product
Branding the product
Marketing and presales
Description

Row drag and drop feature can be enabled by settting allowRowDragAndDrop property as true. In this demo, taskbar drag and drop between rows can be enabled by setting allowTaskbarDragAndDrop as true.

Gantt component features are segregated into individual feature-wise modules. To use row, drag and drop feature we need to inject RowDD and Edit modules.


More information on the Essential® React Gantt Chart can be found in this documentation section.