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 |
|---|---|---|---|---|---|---|
| No records to display |
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 | |
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.