This sample demonstrates dynamic show/hide columns feature of Gantt. Select column name from the properties panel, and then click hide/show to toggle visibility.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|---|
| 1 | Product concept | 4/2/2025 | 4/4/2025 | 3 days | 34 | |
| 2 | Define the product usage | 4/2/2025 | 4/2/2025 | 1 day | 30 | |
| 3 | Define the target audience | 4/2/2025 | 4/3/2025 | 2 days | 40 | |
| 4 | Prepare product sketch and notes | 4/3/2025 | 4/4/2025 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/4/2025 | 4/4/2025 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/7/2025 | 4/16/2025 | 8 days | 25 | |
| 7 | Demand analysis | 4/7/2025 | 4/10/2025 | 4 days | 15 | |
| 8 | Customer strength | 4/7/2025 | 4/10/2025 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/7/2025 | 4/10/2025 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/11/2025 | 4/16/2025 | 4 days | 30 | 7FS,8FS |
| 11 | Product strength analysis | 4/11/2025 | 4/16/2025 | 4 days | 40 | 9FS |
| 12 | Research completed | 4/16/2025 | 4/16/2025 | 0 days | 30 | 10FS |
| 13 | Product design and development | 4/17/2025 | 5/13/2025 | 19 days | 31 | |
| 14 | Functionality design | 4/17/2025 | 4/22/2025 | 4 days | 30 | 12FS |
| 15 | Quality design | 4/17/2025 | 4/21/2025 | 3 days | 40 | 12FS |
| 16 | Define reliability | 4/22/2025 | 4/25/2025 | 4 days | 30 | 15FS |
| 17 | Identifying raw materials | 4/22/2025 | 4/23/2025 | 2 days | 0 | 15FS |
| 18 | Define cost plan | 4/24/2025 | 4/28/2025 | 3 days | 35 | 17FS |
| 19 | Estimate manufacturing cost | 4/24/2025 | 4/28/2025 | 3 days | 40 | 17FS |
| 20 | Estimate selling cost | 4/24/2025 | 4/28/2025 | 3 days | 30 | 17FS |
| 21 | Development of final design | 4/29/2025 | 5/13/2025 | 11 days | 32 | |
| 22 | Develop dimensions and design | 4/29/2025 | 5/2/2025 | 4 days | 30 | 19FS,20FS |
| 23 | Develop designs to meet industry | 5/5/2025 | 5/7/2025 | 3 days | 40 | 22FS |
| 24 | Include all the details | 5/8/2025 | 5/13/2025 | 4 days | 30 | 23FS |
| 25 | CAD - Computer Aided Design | 5/14/2025 | 5/16/2025 | 3 days | 0 | 24FS |
| 26 | CAM - Computer Aided Manufacturing | 5/19/2025 | 5/22/2025 | 4 days | 30 | 25FS |
| 27 | Finalize the design | 5/22/2025 | 5/22/2025 | 0 days | 40 | 26FS |
| 28 | Prototype testing | 5/23/2025 | 5/28/2025 | 4 days | 30 | 27FS |
| 29 | Include feedback | 5/23/2025 | 5/28/2025 | 4 days | 0 | 28SS |
| 30 | Manufacturing | 5/29/2025 | 6/4/2025 | 5 days | 30 | 28FS,29FS |
| 31 | Assembling material into finished goods | 6/5/2025 | 6/11/2025 | 5 days | 40 | 30FS |
| 32 | Final product development | 6/12/2025 | 6/20/2025 | 7 days | 17 | |
| 33 | Important improvement | 6/12/2025 | 6/16/2025 | 3 days | 0 | 31FS |
| 34 | Customer testing and feedback | 6/17/2025 | 6/20/2025 | 4 days | 30 | 33FS |
| 35 | Final product development | 6/23/2025 | 6/26/2025 | 4 days | 30 | |
| 36 | Important improvement | 6/23/2025 | 6/26/2025 | 4 days | 30 | 34FS |
| 37 | Address any unforeseen issues | 6/23/2025 | 6/26/2025 | 4 days | 30 | 36SS |
| 38 | Finalize the product | 6/27/2025 | 7/8/2025 | 8 days | 15 | |
| 39 | Branding the product | 6/27/2025 | 7/2/2025 | 4 days | 30 | 37FS |
| 40 | Marketing and presales | 7/3/2025 | 7/8/2025 | 4 days | 0 | 39FS |
Mar 26, 2025 | Mar 30, 2025 | Apr 06, 2025 | Apr 13, 2025 | Apr 20, 2025 | Apr 27, 2025 | May 04, 2025 | May 11, 2025 | May 18, 2025 | May 25, 2025 | Jun 01, 2025 | Jun 08, 2025 | Jun 15, 2025 | Jun 22, 2025 | Jun 29, 2025 | Jul 06, 2025 | Jul 13, 2025 |
|---|
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 | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
Column | |
Hidden Columns |
The Gantt column can be shown or hidden dynamically using the showColumn and hideColumn methods of the Gantt.
In this demo, the columns can be shown and hidden by selecting the column name in dropdown. Click the Show or Hide button to toggle the visibility. The visibility of column is toggled based on the columns -> headerText value.
The columns -> visible property specifies the visibility of a column. To hide a column at the initial rendering, set the columns -> visible property to false.
More information on the Essential® Angular Gantt Chart can be found in this documentation section.