How to Collapse all tasks and project at the beginning

#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?

#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
#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