How to start all the tasks collapsed in Angular Gantt View

Question

I am using the angular gantt view library. Demo

I don't know why, but i can't start all the tasks collapsed. Basicaly it is just simulate the "Collapse All" button click in Options menu, like $('#btnId').trigger('click'). But not!!

Someone know why?

Answer 1

If i am not mistaken reading the documentation then default behaviour of "Tree" plugins is to "expand all".

Each row in gantt can contain one or more task, setting all row collapsed will result as all tasks get collapsed too.

If you want to collapsed all row after gantt displayed. Try these :

1. set your gantt api (inside your html file)

   <div gantt 
       .....
       api="ganttApi"
       ...
   </div>
   

2. used api event to sent the collapse all command (inside your angular controller).

   $scope.ganttApi = function(api){
       api.core.on.ready($scope, function(api){
           var doDefaultCollapse = false;
   
           api.rows.on.displayed($scope, function(rowList){
               if ((doDefaultCollapse) && (api.data.get().length===rowList.length)) { // wait for last row displayed
                   doDefaultCollapse = false;
                   $timeout(function(){
                       api.tree.collapse(row.model.id);
                   });
               };
           });
   
           api.data.on.change($scope, function(newData, oldData){
               doDefaultCollapse = (!_.isEmpty(newData));
           });
       });
   };
   

In case you only want to collapse one row in your tree, replace above code to :

    var collapsedRowId = 123;
    $scope.ganttApi = function(api){
        api.core.on.ready($scope, function(api){
            var doDefaultCollapse = false;

            api.rows.on.displayed($scope, function(rowList){
                if ((doDefaultCollapse) && (api.data.get().length===rowList.length)) { // wait for last row displayed
                    _.find(rowList, function(row){
                        if ((row.model.id===collapsedRowId ) 
                            && (row._collapsed===false)) { // if row._collapsed is undefined, meant row not added to tree hierarchy yet
                            doDefaultCollapse = false;
                            $timeout(function(){
                                api.tree.collapse(row.model.id);
                            });
                        };
                    });
                };
            });

            api.data.on.change($scope, function(newData, oldData){
                doDefaultCollapse = (!_.isEmpty(newData));
            });
        });
    };

Note : ".find" and ".isEmpty" are lodash. "_.collapsed" is assign by Agular tree plugins and it become property of each row

Hope it helps,

Thanks.

Answer 2

If I understand your question correctly, you are probably wanting to use the api that is on the gantt's scope. I tested collapsing and expanding the demo you mentioned using the collapseAll and expandAll methods and it worked well. The api also contains methods in its core methods to test when the chart is ready so you can collapse it after the chart is ready.