Preventing Scroll Change on Change of Project Start/End Date

[Lisa Scheibner]

What I want to accomplish: 

• I have a specific time range visible in the view (for instance, the range starting one month in the past)
• I want to load in items from multiple API calls that could possibly change the project start and end date

The problem:

• Currently, when a newly added item changes the project's start and end date, the chart scrolls to the new information instead of the keeping the time range starting with one month in the past in view
• This means, as more and more items are loaded, the chart can shift multiple times, which is pretty jarring

Is there a workaround for this issue?

[Monisha Sivanthilingam]

Hi Lisa, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement by making use of the updateTimeScaleView property in the timelineSettings. This property is used to update the timeline when the editing actions are performed. By setting this property to false, we can avoid the update of the timeline when new records are added. The following code snippets demonstrate the solution. 

 

App.vue 

 

timelineSettings: { 

  updateTimescaleView: false, 

}, 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Lisa Scheibner]

Hello Monisha,

Thank you so much for your quick response!

However, this does not seem to be helping, maybe because I am changing the projectEndDate and projectStartDate as new information comes in. Is there a way to change these as well and keep the scroll from changing?

Thanks again.

-Lisa

[Monisha Sivanthilingam]

Hi Lisa, 

 

You are welcome. 

 

We can make use of the scrollToDate method in the dataBound event to scroll to the date you want in the view port even if the project dates are updated. By calling this method in the dataBound event, the scroll position moves to the date specified in the method every time a new record is added. The following code snippets demonstrate the solution. 

 

App.vue 

 

dataBound: function(args) { 

   this.scrollToDate("04/01/2019"); 

} 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Lisa Scheibner]

Hello Monisha,

Thanks again for the quick response. So I am using dataBound to update the scroll position. The only problem is that there is a flicker as the scroll position moves back and forth between some position the gantt chart is automatically applying and the one that I'm applying in this dataBound function. I think that this is, specifically, because the projectEndDate and the projectStartDate are shifting as the data changes. Is there a way to get the gantt chart to not change the scroll based on the change of these values?

Best,

Lisa

[Pooja Priya Krishna Moorthy]

Hi Lisa, 

While dynamically changing the dataSource and if the projectStartDate and projectEndDate is not defined in Gantt, the project’s start and end  date will be automatically validated based on the  current data source. 

As the timeline gets updated due to data source change, the scrollbar may move back and forth and it appears like flickering. In order to avoid this, we can set the fixed projectStartDate and projectEndDate. So that scroll left will remain same even if data source changes.  

  

Please get back to us if you require more information on this. 

  

Regards, 

Pooja K