Issue with Timeline Display

4 posts, 0 answers
  1. Michael
    Michael avatar
    10 posts
    Member since:
    Jan 2017

    Posted 13 Jul Link to this post

    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?

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 17 Jul Link to this post

    Hello Michael,

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    10 posts
    Member since:
    Jan 2017

    Posted 25 Jul in reply to Veselin Tsvetanov Link to this post

    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();
            }
        }

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 26 Jul Link to this post

    Hello Michael,

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top