Components: tree.treeControl.expandAll() has an error

[docaohuynh]

Bug

Dear team!
I has an error when I want to expand all node of Mat nested tree

ERROR TypeError: Cannot read property 'reduce' of undefined
    at NestedTreeControl.push../node_modules/@angular/cdk/esm5/tree.es5.js.NestedTreeControl.expandAll (tree.es5.js:287)
    at Object.eval [as handleEvent] (FilterViewComponent.html:18)
    at handleEvent (core.js:10050)
    at callWithDebugContext (core.js:11143)
    at Object.debugHandleEvent [as handleEvent] (core.js:10846)
    at dispatchEvent (core.js:7509)
    at core.js:7953
    at HTMLButtonElement.<anonymous> (platform-browser.js:1140)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3748)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.0
Material 6.4.1

[devversion]

This is not a very friendly exception. I've created a PR that should improve that.

For now though, you need to somehow set the treeControl.dataNodes property to the current data from your data source. sample code:

myDataObservable.subscribe(data => {
  this.dataSource.data = data
  this.treeControl.dataNodes = data;
});

[bhuvanp1305]

tree.treeControl.expandAll() is worked for me. but I don't understand how to expand particular node in mat tree?
@DevVersion Please provide any reference or solution for this.

[devversion]

@bhuvanp619 Either you use the matTreeNodeToggle dirctive, or you manually find the reference to the given node and run treeControl.expand(myNode).

    const referenceToNode = database.data
      .find(d => d.filename === 'Downloads')

    this.nestedTreeControl.expand(referenceToNode);

Here is a sample stackblitz: https://stackblitz.com/edit/angular-ar8tk4

[bhuvanp1305]

@DevVersion I am using FlatTreeControl. will your solution work on FlatTreeControl?

[devversion]

@bhuvanp619 The expand method should work similar. The solution would work even better because you can just search for the flattened data without having to walk down the tree to find nested nodes.

[bhuvanp1305]

@DevVersion yes you are right.
I am creating a copy move application with two tree so updated tree data is retrieved from server. So in that case when treeDataSource get new data it get collapsed. when i tried to expand new added node in tree by expand() it wont work.

[rduncan]

FWIW - in 7.0.4, tree control expands appear to work correctly for flat trees - this is because the datanodes propery of the tree control gets set by the flat data source. Nested tree controls get error with reduce being called on undefined because nothing sets the nested tree controls datanodes property.

[adamdport]

I ended up here from a stackoverflow question regarding how to preselect nodes. NestedTreeControls have an undefined dataNodes which made the answer impossible. If I recursively set dataNodes at the same time as dataSource.data as per @DevVersion's comment, it works fine.

Here's a reproduction of dataNodes being undefined if needed.

[emilio-martinez]

Ran into this trying to do expandAll().

Setting the data twice as @DevVersion mentioned above works but is kind of an odd and error-prone API, in mo opinion. I'd expect the data source and the tree control to be more in sync rather than coordinating their data sources somewhat manually like that. The method shown above to expand a single method shown above (nestedTreeControl.expand) also is kind of odd—only because requires retroactively looking for a node to pass it to the tree control.

Perhaps the API needs some better tooling around programmatically expanding nodes? The UI part of this story is much smoother.

[rduncan]

After spending more time with trees and data tables, I think more work needs to be done on the level of abstraction. The _datasource_ connect method needs to be informed by various controls (tree control in nested and flat trees and paging and sorting controls in the table) that may change the data needs of the tree/table. So the _datasource_ needs to have access to these, which most naturally owned by the component in question. For one, I'm thinking of adding the datasource methods to the component under development and having it be the datasource... If I actually do that I'll post the results.