[Solved] Re-calculate task width in Gantt on window resize?

[Miljana]

So I have a requirement to have gantt timeline spread as much as possible. Since treelist is fixed 500px width, I calculate upon view init how much slotWidth for each day should be. When I resize screen, what I noticed is that width is not updating, so I tried to set table width via CSS to be 100%. When I resize window in this case, table columns do resize, but task stays the same width.

Also when I collapse treelist and timeline is expanded, it should take 100% of screen, yet it still takes calculated width.

Is there a solution for this resize?

[Martin Bechev]

Hello Miljana,

Based on the provided details, I am not sure that I understand how the implementation looks on your side and what the desired outcome is. Overwriting the default width of Gantt elements through CSS might lead to unexpected behavior.

The treelist part of the Gantt does not provide an option to set a fixed width. You can control the column's width and whether the columns can be resized. The timelinePaneOptions is the only property through which you can set the minimum and max resizable width, but this will be applicable to the timeline view, not to the treelist.

By default, the Gantt width occupies its parent container width and behaves like width:100%. When resizing or collapsing the Gantt treelist part, the width of the timeline will be adjusted accordingly:

https://stackblitz.com/edit/angular-7amtte6t

I would recommend setting the treelist columns so that their cumulative width is 500px, and rely on the built-in Gantt resizing calculations. When resizing, the treelist will show a horizontal scrollbar at some point, but you will have a dynamic timeline column width.

In case you have already implemented some custom logic, but the new values aren't updated, try calling the gantt.updateView() method. A setTimeout(0) might also be required in the collapse handler because the splitter pane animation is asynchronous.

Please provide a demo or a video showing how the Gantt behaves and what the desired outcome is.

Regards,
Martin Bechev
Progress Telerik

[Miljana]

Hello, Martin,

Thank you for the response. I managed to handle that by setting slotWidth each time window resizes or timeline size changes or panes collapse/expand and use gantt.updateView.