My gantt chart task schedule timelines do not appear when the gantt widget is initialized. (see attached Screenshot 1). I've set the default selected view to day, week, month and year and it is happening across all of them. The timelines do appear once you toggle the view post initialization (see screenshot 2 for reference). Modifying any task start date or end date also fixes the issue. The other task information (title, start, end) all display fine post initialization. Any ideas?
3 Answers, 1 is accepted
I have noticed, that you have opened a support ticket on the same topic. As this issue might be applicable in applications of other developers, I would suggest you to continue the discussion here. In case the discussion requires information or implementations details, which should not be shared publicly, we could continue in the support thread.
First of all, thank you for the code snippets prepared, where I noticed, that the Gantt widget is placed within a container element. In some scenarios, such nesting could cause issues as the described. The reason is the fact, that on initial calculation of the position of the tasks, the Gantt chart container is not visible (not displayed) or its width is 0.
This issue could be resolved by calling the Widget.resize() and then Gantt.refresh() methods, after the container has been resized. Here you will find a simple Dojo, that implements the above suggestion.
In case this does not solve the problem faced, may I ask you to provide further implementation details of the case?
Regards,
Veselin Tsvetanov
Progress Telerik
Rank 1
Hi Veselin,
By way of update, invoking the resize and refresh methods did the trick. Thank you. One thing I will mention for the benefit of anyone else who may encounter this issue - my gantt chart is embedded in the contents of a tab that is not visible when the page first loads. Calling resize and refresh methods only resolved the timeline display issue when my gantt tab strip was visible. So what I did was in my TabStrip Activate event handler, I check which tab was activated and if it is the tab with my gantt chart I call resize and refresh. Below is the code for reference:
function onProjectTabStripActivate(e) {
if (e.contentElement.id === 'projectTabStrip-3') {
var ganttChart = $("#ProjectGanttChart").data("kendoGantt");
ganttChart.resize();
ganttChart.refresh();
}
}
Thank you for explaining how the suggested approach can be applied in a Kendo TabStrip scenario. I believe, that the shared details would be useful for other developers too.
Regards,
Veselin Tsvetanov
Progress Telerik