Making tree expanded by default

holimL commented 9 years ago

Hi,

I'm trying to make my tree grid expanded all the time. So inside my controller I initialized my_tree, and every time I get new data with $http there's a call tree.expand_all(). However this doesn't work although I can see my_tree has expand_all before first call to it is made.

When I made a button just like your tutorial, it works fine. Could there be other factor that I'm missing? Currently I made it work in a hackish way, inserting these lines in on_treeData_change() right before the return statement:

if( scope.treeControl !== null && scope.treeControl !== undefined ) {
    scope.treeControl.expand_all();
}

seetsy commented 8 years ago

+1 on this

After loading the data asynchronously via $http, when trying this:

$scope.tree_data = items; $scope.my_tree.expand_all()

The tree does not expand. There seems to be a timing issue where the on_treeData_change is occurring after my_tree.expand_all() is called.

Here's a workaround from the controller side: $scope.tree_data = items; setTimeout(function() { $scope.$apply($scope.my_tree.expand_all); }, 100);

AlexBurdu commented 8 years ago

+1 on this as well. Thanks @seetsy for the workaround

miguelcamargo9 commented 8 years ago

+1 on this as well. Thanks @seetsy

gurungbinod commented 8 years ago

I have the same issue. When I tried your code, I am getting "Error: $scope.my_tree is undefined". Why is that?

khan4019 commented 8 years ago

Can you share your data? if possible the code

Make sure, it matches with the structure of an array of items and each item has a collection named as children. Please compare with read me file

gurungbinod commented 8 years ago

Actually, there was no $scope.my_tree in my controller so it was giving me "Error: $scope.my_tree is undefined". But it still does not work.

Here is code snippet in my controller:

$scope.tree_data = [];

PreferenceCategory.query(function(response) { // categories data is in response.items object $scope.prefCategory = response.items; var items = ref_def(response.items); $scope.tree_data = items; $scope.my_tree = {}; function ref_def(items) { angular.forEach(items, function(value, key) { value = value.renameProperty('preferenceCategories', 'children'); if (value.hasOwnProperty("preferenceCategories") && value.preferenceCategories.length > 0) { ref_def(value.preferenceCategories); } }) return items; } // $scope.tree_data = refit_keys(response.items); }); `

I am using ref_def function to rename preferenceCategories key to children.

Here is the html code:

<button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button> <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>

<tree-grid tree-data="tree_data" tree-control="my_tree" col-defs="col_defs"></tree-grid>

Update: It is displaying only the root level data and is not expanded by default. I have to click on + sign to see the child data. Even those Expand ALl and Collapse All button does not work.

khan4019 commented 8 years ago

do you see any error? or log? what does the tree_data in console? can you put things together in codepen or jsfiddle

TrueDub commented 8 years ago

Is this issue still outstanding? Could further detail be provided please?

TrueDub commented 8 years ago

Closing due to lack of further information

reemokada commented 6 years ago

Hello together, I have the same issue. I noticed that the expand is working in the demo provided hier but not in the version in the latest release. Would you please tell me how to fix this? is there any way to make the tree expanding by default if I set the expand level to one insted of 2?

Lilipi commented 6 years ago

What I wanted : have my tree expanded by default when I push data in it, but let free users to expand/collapse rows as they want.

I have modified a little bit this library and it works. What you have to do :

In on_treedata_change function insert those lines at the end (just before return) :

if (scope.treeData.expandAll && scope.treeData.init) {
for_each_branch(function (b, level) {
    return b.expanded = true;
});
scope.$root.$broadcast('expandedInit');
}

Modify tree.expand_all function like this :

tree.expand_all = function () {
scope.$root.$broadcast('expandedInit');
return for_each_branch(function (b, level) {
    return b.expanded = true;
});
};

In your controller, just before pushing your data into your tree do this :

response.init = true;
response.expandAll = true;
$scope.tree_data = response;

In your controller, add this $on :

$rootScope.$on("expandedInit", function() {
$scope.tree_data.init = false;
})

Hope this helps !

reem80 commented 6 years ago

Hello Lilipi, this solution works for me. Thanks a lot. I have a second question. Is it possible to use a template for the cellTemplate for my tree? how can I bind it to only one column? Thanks and regrads. Reem.

Lilipi commented 6 years ago

Hello reem80 !

No problem ;)

I use col_defs to do this ; I define all my columns and template if necessary :

In my controller :

$scope.col_defs = [
              {
                  field: "id",
                  displayName: gettextCatalog.getString("Id")
              },
              {
                  field: "title",
                  displayName: gettextCatalog.getString("Title")
              },
              {
                  field: "state",
                  cellTemplate: "<span state='row.branch[col.field]'></span>", //Here is my cellTemplate
                  displayName: gettextCatalog.getString("State")
              },
              {
                  field: "lock",
                  cellTemplate: "<span doc-lock='row.branch[col.field]' uri='row.branch[\"uri\"]'></span>",
                  displayName: gettextCatalog.getString("Locked by")
              },
              {
                  field: "actions",
                  cellTemplate: "<span><action ng-repeat='action in row.branch[col.field]' index='row.branch[\"index\"]' action='action' uri='row.branch[\"uri\"]'></action></span>",
                  displayName: gettextCatalog.getString("Actions")
              }
            ];

And then in my view : <tree-grid id="tree-grid-compo" tree-data="tree_data" ... col-defs="col_defs"></tree-grid>

Hope this helps

reem80 commented 6 years ago

Hello Lilipi, thansk for you reply. Actually Im setting both col_defs and cellTemplate dynamically basec on my http calls. My problem is that my cellTemplate looks like this:

cellTemplate: " <div id=\"statusColumn\" class=\"btn-group btn-group-xs\" type=\"radio\" ><button id='btnConnectionStatus' type=\"button\" uib-popover= \"This icon shows the state of the work item comparison between RTC and MCR\" popover-title=\" Connection State\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\"class=\"btn\"style=color:{{(row.branch[col.field])[5]}} ><span class=\"glyphicon glyphicon-transfer\"></span></button>" + "<button id='btnTasknameStatus' type=\"button\" uib-popover-template=\"dynamicPopover.templateUrl\" popover-title=\"{{dynamicPopover.title}}\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\" class=\"btn\" style=color:{{(row.branch[col.field])[0]}}><span class=\"glyphicon glyphicon-star\">" + "</span></button>" + "<button id='btnCategoryStatus' type=\"button\" class=\"btn\" uib-popover-template=\"'PopoverTemplate.html'\" popover-title=\" Comparison state\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\" style=color:{{(row.branch[col.field])[1]}} ><span class=\"glyphicon glyphicon-chevron-down\"></span></button>" + "<button id='btnTypeStatus'type=\"button\" class=\"btn\" uib-popover-template=\"'PopoverTemplate.html'\" popover-title=\" Comparison state\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\" style=color:{{(row.branch[col.field])[3]}} ><span class=\"glyphicon glyphicon-remove\"></span></button>" + " <button id='btnWorkStatus' type=\"button\" class=\"btn\" uib-popover-template=\"'PopoverTemplate.html'\" popover-title=\" Comparison state\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\" style=color:{{(row.branch[col.field])[4]}} > <span class=\"glyphicon glyphicon-hourglass \"></span> </button>" + "<button id='btnEndDateStatus' type=\"button\" class=\"btn\" uib-popover-template=\"'PopoverTemplate.html'\" popover-title=\" Comparison state\" popover-placement =\"bottom-right\" popover-trigger=\"'mouseenter'\" style=color:{{(row.branch[col.field])[2]}} ><span class=\"glyphicon glyphicon-cd \"></span></button>

I dont want to keep it like this. I want to get the HTML into separated file and bind this file to my cellTemplate. Any Idea?

Thansk and regards. Reem.

Lilipi commented 6 years ago

Ok, I didn't understand well what you wanted, sorry !

Did you try using $templateCache service ? (don't know if it works) https://docs.angularjs.org/api/ng/service/$templateCache

$templateCache.get('nameOfTemplate.html');

Lilipi

reem80 commented 6 years ago

Hello Lilipi,

I have another question regrading the ng repeat. I have to show the same data in my UI based on 2 logics. the user can select using a button which structure he wants to show. The structure change between both logics works. But I have the problem that my row.level still the same when showing the tree. I mean if a node is a child in one logic, it is shifted to the right when I use the other structure in which its a root and not a child. Is there any way to clear the row.level completly when we init the ng reppeat?

khan4019 / tree-grid-directive

Making tree expanded by default #53