Timeline misaligned sometimes

11 posts, 1 answers
  1. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 07 Dec 2018 Link to this post

    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.

  2. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 07 Dec 2018 Link to this post

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

     

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

     

    Thanks

  3. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 07 Dec 2018 Link to this post

    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

     

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 11 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 11 Dec 2018 in reply to Ivan Danchev Link to this post

    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

     

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 13 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 13 Dec 2018 in reply to Ivan Danchev Link to this post

    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

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 14 Dec 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 10 Jan 2019 Link to this post

    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

  10. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2189 posts

    Posted 14 Jan 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Vedad
    Vedad avatar
    97 posts
    Member since:
    Jun 2018

    Posted 15 Jan 2019 in reply to Ivan Danchev Link to this post

    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

Back to Top