admitting I have 100 tasks in my Gantt, starting from January to December and considering I’m on a month view, I have 100 rows in the grid area, with only few of those actually displaying in the Timeline (just because there dates corresponds to the current view displayed).
Is there a way to display only the active rows in the grid (the tasks which match the actually visible) in the Gantt based on the start and end of the view?
The idea would be to simplify the reading of the Gantt. Rows would display (and be hidden) based on the displayed dates.
I would like just to see all tasks from Project#1 and tasks #1 in Project#2 if I’m positioned at the start of the timeline.
Scrolling at the end of the timeline, I would like to see in my grid just the tasks which are actually visible in the timeline (given the above example, rows for tasks #2.1, #4.1 and #4.2 wouldn’t display).
With loads of tasks, such a feature would ease very much the reading of my Gantt.
As a follow up of the above question, here is a code which displays in the console the tasks actually visible in the timeline (based on the scrolled date).
However my guess is that if I use it to filter data and render the Gantt each time there is a scroll move, this will highly slow down the Gantt.
//Get the timeline width using jQuery
let timeline_width = $(".gantt_task").width()
let start_visible = left
let end_visible = left + timeline_width
let visible_tasks = [] //Stores the list of tasks visible in the timeline
tasks.data.forEach(function(el) {
if (el.task_type == 'task') {
let task_pos = gantt.getTaskPosition(el, el.start_date, el.end_date);
let pos_start = task_pos.left
let pos_end = pos_start + task_pos.width;
//Overlapping condition to check if task is actually visible in the timeline
if (start_visible <= pos_end && end_visible >= pos_start) {
visible_tasks.push(el.id)
}
}
})
console.log(visible_tasks)
Hello Sébastien,
It is possible to do that.
You can use onBeforeTaskDisplay function that defines if the task should be displayed in the chart or not: docs.dhtmlx.com/gantt/api__gant … event.html
We get the first and the last scales that display dates (other scales are not rendered if you don’t use gantt.render() command. So we compare its coordinates with task coordinates and if it fits the width, we display the task. It is true that if you refresh the chart each time you scroll it, the browser will hang. I think if we hook mouse release button it will be better. Of course you can add additional conditions if you need it. Here is an example: snippet.dhtmlx.com/0891c6755
Before testing it, I recommend resizing the chart window or maybe you won’t see some tasks.