How to add multiple tasks(bulk) in the gantt tree?

Gantt
#1

I’m working with an infinity scroll for Gantt tree view.
For the initial load, API sends me about 30 records and on scroll I would make consequent backend calls for data. I would like to show the data in Gantt dynamically without refreshing the whole page.

Is it possible to achieve in Gantt tree view? Kindly provide suggestions

#2

Hi manzi,
The simplest way to all multiple tasks into Gantt is to use gantt.parse method.
As for loading them dynamically, we don’t have built-in support for it, dynamic loading that we have is designed for a different use case https://docs.dhtmlx.com/gantt/desktop__dynamic_loading.html .
You can try implementing it manually, but it will require some coding.

I’d start with onGanttScroll event listener.
Each time users scroll the Gantt downwards, you can check the last visible task in the viewport. And if there are no tasks after it - you request an extra portion of tasks and add them into Gantt:

gantt.attachEvent("onGanttScroll", function loadTasks(){
  var lastIndex = getLastTaskIndex();
  var lastVisibleTask = gantt.getTaskByIndex(lastIndex);
  console.log(lastVisibleTask);

  if (!lastVisibleTask || !gantt.isTaskExists(gantt.getNext(lastVisibleTask.id))) {
    var tasks = createNTasks(lastIndex + 1, 30)
    console.log(tasks)
    gantt.parse({ data: tasks });
  }
});

function getLastTaskIndex(){
  var visibleHeight = gantt.$task_data.offsetHeight;
  var scrollState = gantt.getScrollState();

  var lastVisiblePos = scrollState.y + visibleHeight;
  var lastVisibleIndex = Math.floor(lastVisiblePos / gantt.config.row_height);
  var maxVisibleIndex = gantt.getVisibleTaskCount() - 1;
  return Math.min(maxVisibleIndex, lastVisibleIndex);
}

Here is a quick example: https://snippet.dhtmlx.com/5/8b0bb8278

Here are the general steps for doing this:

  1. In my example, I create an array of 30 task objects on the client.

  2. Using the height of the timeline Gantt and the vertical scroll position, I get the coordinate of the lowest visible point of the Gantt:

     var visibleHeight = gantt.$task_data.offsetHeight;
 var scrollState = gantt.getScrollState();
 var lastVisiblePos = scrollState.y + visibleHeight;

After that, knowing the height of the line with the task (gantt.config.row_height), I can find out the index of the task that is located at this coordinate:

    var lastVisibleIndex = Math.floor(lastVisiblePos / gantt.config.row_height);
    var maxVisibleIndex = gantt.getVisibleTaskCount() - 1;
    return Math.min(maxVisibleIndex, lastVisibleIndex);
  1. And knowing the task number, I get it from the Gantt by index. Using the getNext method, I check if the latest visible task is the latest loaded one. If that’s the case, the next 30 tasks must be downloaded.

One thing to note, that in my snippet tasks are loaded synchronously (I generate new tasks on the client with code). If you’ll be requesting them from the server, you can use gantt.load and you’ll need to set up some kind of flag variable so if onGanttScroll fires multiple times while tasks loading is in process, it wouldn’t fire multiple server requests.