Making tree expanded by default

[holimL]

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]

+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]

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

[miguelcamargo9]

+1 on this as well.
Thanks @seetsy

[gurungbinod]

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

[khan4019]

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]

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]

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

[TrueDub]

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

[TrueDub]

Closing due to lack of further information

[reemokada]

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]

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]

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]

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