CirclonGroup / angular-tree-component

A simple yet powerful tree component for Angular (>=2)
https://angular2-tree.readme.io/docs
MIT License
1.1k stars 492 forks source link

callback function when expand node. #825

Open peterarsentev opened 4 years ago

peterarsentev commented 4 years ago

Hi. I have a lazy load tree. I need to open an inner node. For this reason I call an expand method and delay 2 seconds until it loaded. it is my snippet.

    for (let i = 0; i < res.tasks.length; i++) {
      const exists = this.tree.treeModel.getNodeById(res.tasks[i].id);
      if (exists) {
        exists.expand();
        exists.focus();
      } else {
        setTimeout(() => {
          const node = this.tree.treeModel.getNodeById(res.tasks[i].id);
          node.expand();
          node.focus();
        }, 2000 * i);
      }
    }

I'll appreciate extremely if you show me another solution or add a new feature.

ntsokos commented 4 years ago

In my case, I have a tree that is async loaded and when navigating away and back, it needs to be re-expanded to its previous state.

I maintain a list of expanded ids with hierarchy in mind and perform the expansion with the right order (from root nodes to leaf nodes) making sure that the node to be expanded is already loaded.

Because as you mentioned there is no way to know when the expansion of the node is completed, I ended up bypassing the getChildren feature and explicitly load the children of each node using node.data.children

This way I have complete control of the flow as I am handling the observable that fetches the children. Only after the node's children are loaded I use node.expand() and then go on with the next node in my list.

Downsides on this are that I have to maintain two ways of fetching children for a node, and the UX is much poorer as the user does not get the "loading" indications for each node, rather wait until all fetches are completed.

I too would benefit with a way to identify when an expansion is completed, ideally by having a node.expand method that returns an observable or promise, or could even do with hooking to an event that emits an action when a node is expanded.