Timeline misaligned sometimes

[Vedad]

Hi, 

We encountered strange behavior on gantt timeline. For certain situations gantt timeline scrolls to the right and then headers stop but timeline below keeps scroling but showing white space at the end and causing timeline to lose alignment.

for example, last element in gantt finishes on march 2019, and we scroll time line until then. When march is displayed in header header scrolling stops but timeline table below continue scrolling basically moving columns to the left, and showing white space on the right. This causes columns in timeline to misalign with their corresponding header columns, so task finishing on 15.12.2019. is displayed to be finishing week or two before, depending how much whitespace is added at the end.

See screenshots attached please.

Thank you and regards.

[Vedad]

Just in addition i realized the same thing (in smaller scale happens in this dojo as well)

 

http://dojo.telerik.com/ETudE/14

 

Thanks

[Vedad]

In addition, i just realized the same issue can be seen in this dojo (only in smaller scale) so maybe it helps.

 

http://dojo.telerik.com/ETudE/14

 

[Ivan Danchev]

Hello Vedad,

The misalignment appears to be related to initializing the Gantt in an initially invisible container. At my end setting the showWorkDays option to false prevents the misalignment: see the modified dojo example. Could you give it a try and let us know whether it affects the alignment in your scenario?
We will further investigate other scenarios, e.g., the Gantt being initialized in a visible container and having dataSource set initially, and check whether the value of this options affects them.

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hi Ivan, 

thanks for the response. Unfortunately, it doesn't seem to help in my case.

showWorkDays property is set to false on our app by default.

If it helps, we use angularjs syntax in our app. 

<div id="gantt" data-kendo-gantt="instance" data-k-options="ganttOptions"></div>

and extract from our ganttOptions:

....
showWorkDays: false,

currentTimeMarker: true,
....

If there is anything I can provide to help detecting issue, please let me know.

Thanks and regards,

Vedad

 

[Ivan Danchev]

Hi Vedad,

We have reproduced a slight misalignment as in the dojo you posted however the screenshot you attached shows large white space that we were not able to replicate and we think it could be due to a different issue. Could you post a dojo example and demonstrate this white space on scrolling the Gantt? You can use some dummy data to populate the widget if it is needed for the issue to be exhibited, for example:

dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }
  ],

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hi Ivan, I will try to do so as soon as possible.

Also keep in mind that white misalignment is not always this large as I posted in screenshots, its simply a matter of case. In some cases its quite big in some its minor. I will try to get you as accurate info and example as possible.

Regards,

Vedad

[Ivan Danchev]

Hi Vedad,

Thank you. It would help us investigate whether this appearance is due to a bug in the widget and whether specific configuration causes it.

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hi Ivan, 

Also, I reproduced this bug on sample dojo for resources simply by playing with drag 'n drop of project (moved it further in the future twice) https://dojo.telerik.com/OGUyUHuc.
This is plain Kendo code, without any interventions by me.

For my concrete case, I have detected the problem and its caused by my local change. I had the requirements to move resources list within task further right behind task itself. Place where I did recalculation of the position for resource initials caused timeline table to add this width to the table and generate additional space, while header columns didn't follow this calculation. 

I am currently looking for the other way to re-position res names, so if you have any safe suggestion how to do this safely it would be great.

Thanks and regards,

Vedad

[Ivan Danchev]

Hi Vedad,

I tried reproducing the misalignment by dragging/dropping "Project Kickoff" in the dojo example you linked, but no misalignment occurred. Could you specify which date you drop it over?

As for moving the resources further to the right, there is no configuration option or API method for doing that, so it has to be done with CSS, for example:

.k-gantt-tasks .k-resources-wrap {
  padding-left: 20px;
}

However, this causes misalignment so we would recommend not changing the resources default position or paddings.

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hi Ivan, 

Thanks for your response. I reproduced the bug twice yesterday, but today, I have no chance. :) I wanted to record the video, but I couldn't reproduce. It obviously appears only occasionally. I attached image for you to see, but since I can't give you useful steps, you can just keep it in sight in case someone else reports it.

Anyway, I solved my issue by fixing part that I introduced, so it works now. Thanks for your help.

Best regards,

Vedad