This sample demonstrates the Gantt column resizing feature. Click and drag at the right corner of each column header to resize the column.
ID | Job Name | Start Date | End Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|---|
| No records to display |
Mar 25, 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 | Jul 07, 2024 | Jul 14, 2024 | Jul 21, 2024 |
|---|
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 | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
The Gantt columns can be resized by clicking and dragging at the right corner of columns header. Set the allowResizing property to true to enable column resizing behavior in Gantt. You can also prevent the resize of a particular column by setting columns -> allowResizing to false in columns definition
In this demo, the allowResizing feature has been enabled by setting the allowResizing property to true. Task Name column can be resized between a range of minWidth (120 pixels) and maxWidth (300 pixels). The column resizing has been disabled in the Duration column
Injecting Module:
Gantt component features are segregated into individual feature-wise modules. To use Resize feature, we need to inject ResizeService into the @NgModule.providers section.