Gantt init offscreen - left panel width

[Matthew]

Hi,

I have a Gantt in a bootstrap tab control (not selected on page load).  The Gantt was failing to render when the tab was displayed.  So I added resize\refresh calls after the tab is displayed.  The same technique is used in this fiddle: http://dojo.telerik.com/@mattpil29/IXoGOpIm

However the left panel displaying the task names is always collapsed\zero width.  How do we make sure this panel shows all columns when first displayed?

Thanks, Matt

Bonus point question: I do not want a vertical scroll bar in the Gantt chart, instead I want its height to expand as the tree on the left is expanded - the user will scroll my whole page.  I can't see a 'auto' height option.  Can this be achieved?

 

[Ivan Danchev]

Hi Mathew,

The issue is caused by the Gantt being initialized in an invisible container, which prevents it from properly calculating its dimensions. To avoid the treelist being collapsed in addition to calling the resize and refresh methods you can set the listWidth configuration option to its default value ("30%") or another desired value:

gantt.setOptions({ listWidth: "30%" });

Updated dojo example.

As for the second question, currently only fixed height is supported by the Gantt. Achieving the described behavior would require a custom solution.

Regards,
Ivan Danchev
Progress Telerik

[Matthew]

Thanks, it worked!

I assume I can use setOptions with any of the fields listed here: https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#fields

Can you give any guidance/examples of 'auto height' Gantt as for Single Page Apps having a scrolling region within a Scrolling page is not a nice user experience.

Matt

[Ivan Danchev]

Hi Matt,

The Gantt inherits the setOptions method from the Widget base class. There are differences in how it is implemented for the different widgets in the suite and there are properties that cannot be set with it (however we do not have a list of those).

You could give the following CSS customization a try:

.k-gantt .k-grid-content {
  overflow-y: visible !important;
  height: auto !important;
}

.k-gantt .k-gantt-layout {
  height: auto !important;
}

but have in mind that the widget hasn't been tested with it so we cannot guarantee it will work in all scenarios. Dojo example with the CSS above applied.

Regards,
Ivan Danchev
Progress Telerik

[Matthew]

Thanks that gives us a start.  I've already found that my footer isn't moving down and the grip on the splitter is out of place.

[Matthew]

We have fixed the Gantt so it can auto expand: https://dojo.telerik.com/@mattpil29/UCiPujUd

This uses the styles mentioned above (thanks Ivan) plus one to fix the splitter handle.  It also has the height set to auto.  Note the footer DIV correctly moves down.

Enjoy!

[Ivan Danchev]

Hi Matt,

I hadn't noticed the issue with the footer. Indeed the styles you have added fix that and the resize handle position. Thank you for sharing them, I am sure this thread will be helpful to other members of the community aiming at achieving the same auto-resizing Gantt behavior.

Regards,
Ivan Danchev
Progress Telerik