Gantt Horizontal Infinite Scroll

Gantt
#1

Hello,

I’m trying to implement infinite scroll on horizontal scrollbar, so that when the user scrolls to the end of the timeline max date is automatically updated by 2 days.

So far the best thing I’ve written is:

gantt.attachEvent(
  'onGanttScroll',
  function (_left, _top) {
    const grid = document.getElementsByClassName('gantt_task')[0]

    if (grid.scrollLeft + grid.clientWidth === grid.scrollWidth) {
      gantt.getState().max_date = gantt.date.add(
        gantt.getState().max_date,
        2,
        'day'
      )
      grid.scrollLeft -= 10
      gantt.render()
      gantt.showDate(gantt.getState().max_date)
    }
  },
  {}
)

However it’s not working.
Could use some help here.

Thanks in advance

#2

Hello Bartosz,
Usually, Gantt displays the dates in the timeline depending on the task dates. Otherwise, you need to specify the displayed date range with the gantt.config.start_date and gantt.config.end_date parameters:
https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html

Modifying the dates returned by the getState method won’t make any change as it is a read-only property:

getState Gantt Docs.

Here is an example of how it might be implemented:
https://snippet.dhtmlx.com/4u52p5g3?text=gantt.%2Binfinite%2Bscroll

Please, note, that the approach will work only while the user scrolls the timeline. As soon as the scrollbar reaches the most left or right position, the event won’t fire.