This sample demonstrates the reordering feature of the Gantt columns. Select column name and index from properties panel to reorder the columns. You can also reorder columns by simply dragging and dropping them to the desired position.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|---|
| 1 | Product concept | 4/2/2024 | 4/8/2024 | 5 days | 18 | |
| 2 | Defining the product and its usage | 4/2/2024 | 4/4/2024 | 3 days | 30 | |
| 3 | Defining target audience | 4/2/2024 | 4/4/2024 | 3 days | 0 | |
| 4 | Prepare product sketch and notes | 4/5/2024 | 4/8/2024 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/8/2024 | 4/8/2024 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/9/2024 | 4/18/2024 | 8 days | 15 | |
| 7 | Demand analysis | 4/9/2024 | 4/12/2024 | 4 days | 15 | |
| 8 | Customer strength | 4/9/2024 | 4/12/2024 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/9/2024 | 4/12/2024 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/15/2024 | 4/18/2024 | 4 days | 30 | 7FS |
| 11 | Product strength analsysis | 4/15/2024 | 4/18/2024 | 4 days | 0 | 9FS |
| 12 | Research complete | 4/18/2024 | 4/18/2024 | 0 days | 0 | 10FS |
| 13 | Product design and development | 4/19/2024 | 5/16/2024 | 20 days | 13 | |
| 14 | Functionality design | 4/19/2024 | 4/23/2024 | 3 days | 30 | 12FS |
| 15 | Quality design | 4/19/2024 | 4/23/2024 | 3 days | 0 | 12FS |
| 16 | Define reliability | 4/24/2024 | 4/25/2024 | 2 days | 30 | 15FS |
| 17 | Identifying raw materials | 4/24/2024 | 4/25/2024 | 2 days | 0 | 15FS |
| 18 | Define cost plan | 4/26/2024 | 4/29/2024 | 2 days | 15 | |
| 19 | Manufacturing cost | 4/26/2024 | 4/29/2024 | 2 days | 30 | 17FS |
| 20 | Selling cost | 4/26/2024 | 4/29/2024 | 2 days | 0 | 17FS |
| 21 | Development of the final design | 4/30/2024 | 5/8/2024 | 7 days | 8 | |
| 22 | Defining dimensions and package volume | 4/30/2024 | 5/1/2024 | 2 days | 30 | 19FS,20FS |
| 23 | Develop design to meet industry standards | 5/2/2024 | 5/3/2024 | 2 days | 0 | 22FS |
| 24 | Include all the details | 5/6/2024 | 5/8/2024 | 3 days | 0 | 23FS |
| 25 | CAD computer-aided design | 5/9/2024 | 5/13/2024 | 3 days | 30 | 24FS |
| 26 | CAM computer-aided manufacturing | 5/14/2024 | 5/16/2024 | 3 days | 0 | 25FS |
| 27 | Design complete | 5/16/2024 | 5/16/2024 | 0 days | 0 | 26FS |
| 28 | Prototype testing | 5/17/2024 | 5/22/2024 | 4 days | 30 | 27FS |
| 29 | Include feedback | 5/17/2024 | 5/22/2024 | 4 days | 0 | 28SS |
| 30 | Manufacturing | 5/23/2024 | 5/29/2024 | 5 days | 30 | 28FS,29FS |
| 31 | Assembling materials to finsihed goods | 5/30/2024 | 6/5/2024 | 5 days | 0 | 30FS |
| 32 | Feedback and testing | 6/6/2024 | 6/13/2024 | 6 days | 47 | |
| 33 | Internal testing and feedback | 6/6/2024 | 6/10/2024 | 3 days | 45 | 31FS |
| 34 | Customer testing and feedback | 6/11/2024 | 6/13/2024 | 3 days | 50 | 33FS |
| 35 | Final product development | 6/14/2024 | 6/19/2024 | 4 days | 30 | |
| 36 | Important improvements | 6/14/2024 | 6/19/2024 | 4 days | 30 | 34FS |
| 37 | Address any unforeseen issues | 6/14/2024 | 6/19/2024 | 4 days | 30 | 36SS |
| 38 | Final product | 6/20/2024 | 7/1/2024 | 8 days | 15 | |
| 39 | Branding product | 6/20/2024 | 6/25/2024 | 4 days | 0 | 37FS |
| 40 | Marketing and presales | 6/26/2024 | 7/1/2024 | 4 days | 30 | 39FS |
Mar 24, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 |
|---|
S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F |
|---|
|
Column
|
|
|
Column Position
|
|
Reordering can be enabled by setting the allowReordering property to true. Reordering can be done by dragging and dropping the column header from one index to another index within the TreeGrid part. The location in which the column to be placed will be indicated by two arrows symbols. In this demo, you can either reorder columns by dragging and dropping or by selecting column name and column index from dropdown to reorder the columns. Injecting Module: Gantt features are segregated into individual feature-wise modules. To use reordering feature, we need to inject Reorder module using Gantt.Inject(Reorder) method. More information about column reordering can be found in this documentation section.