How to Collapse all tasks and project at the beginning

Gantt
#1

I want to collapse all the tasks and collapse the project at the beginning,but I don’t know how.

#2

For the moment there is no method to do that directly. We will add it in the future version.
You might want to take a look at “GanttTask.prototype.createTreeImg” implementation and add your own code like that.

#3

Hello,
I hope we are in the future now since I am also looking for the possibility to collapse all tasks on load. :smiley:

Has this function been implemented?

1 Like
#4

You can control the initial state by using open_tree_initially config option,

docs.dhtmlx.com/gantt/api__gantt … onfig.html

Also, there is open API
docs.dhtmlx.com/gantt/api__gantt_open.html
which can be combined with eachTask iterator to change state of all items in the gantt
docs.dhtmlx.com/gantt/api__gantt_eachtask.html

And last, you can define open property in an xml|json data. It allows to configure initial open state for each branch separately.
docs.dhtmlx.com/gantt/desktop__l … properties

#5

Here are functions to do the trick.
I’ve included an “if” test to only work on projects but you can remove it to work on all levels.

   function closeAll()
   {
        gantt.eachTask(function(task2close){
            if (task2close.$level == 0) { //is a project, not a task
            	gantt.close(task2close.id);
            }//endif  
        });
    }//closeAll
    
    function openAll()
    {
        gantt.eachTask(function(task2open){
            if (task2open.$level == 0) { //is a project, not a task
            	gantt.open(task2open.id);
                console.log(task2open.id);
            }//endif
        });
        
    }//openAll
1 Like
#6

Hi,

if you want to collapse tasks initially, I’d suggest setting the open state in onTaskLoading event:

gantt.attachEvent("onTaskLoading", function(task){
    task.$open = false;
    return true;
});

DEMO: http://snippet.dhtmlx.com/617eb8eae

As for opening and closing project tree on demand, you can do the following:

function closeAll(){
	gantt.eachTask(function(task){
		task.$open = false;
	});
	gantt.render();
}
    
function openAll(){
	gantt.eachTask(function(task){
		task.$open = true;
	});
	gantt.render();
}

http://snippet.dhtmlx.com/417dac47b

It does pretty much the same thing your code does, the difference is that each call of gantt.close or gantt.open can fire a complete repaint of the gantt. Potentially, it can lead to redundant repaints if you have multiple tasks at the top level

2 Likes
#7

Hi,

I ran to a bug with closeAll if there is scroll (on y) and you click it when you have scrolled down to buttom. Reffer to this snippet: http://snippet.dhtmlx.com/5/c83ac5d06
A quick solution to this problem is to use gantt.scrollTo(0, 0); in closeAll function.

#8

Hello Marko,
Thank you for letting us know about that issue. I added it as a bug to our internal bug tracker. The dev team will fix it in the future, but I cannot give you any ETA.

As a workaround, you can scroll the same position after collapsing or expanding tasks:
http://snippet.dhtmlx.com/5/4044f5ce1

#9

Hello Marko,
The dev team fixed the bug with the Smart rendering. Now it should work correctly if you expand or collapse tasks regardless of the vertical scroll position:
https://docs.dhtmlx.com/gantt/whatsnew.html#7111

You can check how it works in the following samples:
https://docs.dhtmlx.com/gantt/samples/03_scales/02_month_days.html
https://snippet.dhtmlx.com/5/72a5b6f1d
http://snippet.dhtmlx.com/5/0d6cf0839