This is a migrated thread and some comments may be shown as answers.
Gantt init offscreen - left panel width
6 Answers 58 Views
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 24 Apr 2018, 10:02 AM

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?

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 26 Apr 2018, 06:55 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matthew
Top achievements
Rank 1
answered on 26 Apr 2018, 09:05 AM

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

0
Ivan Danchev
Telerik team
answered on 30 Apr 2018, 07:51 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matthew
Top achievements
Rank 1
answered on 30 Apr 2018, 01:31 PM
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.
0
Matthew
Top achievements
Rank 1
answered on 01 May 2018, 10:27 AM

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!

0
Ivan Danchev
Telerik team
answered on 02 May 2018, 07:20 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Gantt
Asked by
Matthew
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or