How to change the behavior of click on node (v3.0.4) about vue-tree HOT 9 CLOSED

Another use case I see for exposing the load children async handler is to be able to re-trigger the loading when we know the response should be different (e.g. when a tree represents a file system and someone drops a file somewhere in the tree (server side) and we want the UI to be updated)

from vue-tree.

Hey, sorry I've taken a bit to get back to you on this. I have a couple of ideas, but I haven't had a chance to test them out and make a codepen or anything. I probably won't get to that until after work tonight though, so I'll give you my thoughts so you at least may have a starting point.

The tree uses an internal property on the model, model.treeNodeSpec._.state.areChildrenLoaded to determine the loading state for the child nodes. To re-trigger the async load, I think you'd need to:

1. set the node's expanded property to false
2. set the children list to [] (probably not necessary, but why not clean up after ourselves)
3. set the internal model.treeNodeSpec._.state.areChildrenLoaded property to false
4. set the node's expanded property to true again to re-trigger the async load

Again, I haven't had a chance to test it out, but I'm pretty sure that will work.

from vue-tree.

Hello, really no problem for the delay, I am not expecting immediate answers.

What you describe makes sense, I'll try doing that! It's not so much of an issue except for the toggling expanded which I assume will look weird interms of ui/ux! But if it works, it works!

I would still be in favor of an exposed (re)loadChildren handler. Maybe not in this old version but in the newer one.

Cheers!
M

from vue-tree.

I agree, the ability to reload async children has some convincing use cases. I've added #279 to capture this for inclusion in 5.1.0. I doubt it will be difficult to add. Thanks for the suggestion! I'll leave this issue open so you can let me know if the proposed solution above (or some variation) works for you, or if we need to work together a little more to get what you need.

from vue-tree.

Hello @grapoza, so, coming back to it: Step 4 does not work as expected. The node is expanded and empty but this does not trigger the load children request (the request does not appear in the network tab!). Any idea of something else that should be toggle to trigger the request ?

from vue-tree.

Alright, I finally got to sit down and pen this out. I think the expander behavior is one of those things that's just been around since day one and got beaten around and ignored over time to the point where even I forgot how it actually works. Turns out the behavior isn't a watch on expanded like I assumed, it's actually done through a couple of event handlers. I made a pen with a working (but so ugly) block of code, which links to the handlers to further clarify. Let me know if this is helpful.

https://codesandbox.io/s/exciting-lichterman-5dfmjq?file=/src/App.vue

from vue-tree.

Hello,

So it's indeed a bit hacky but it works as expected! This issue is solved, feel free to close it.

I'm currently developing a feature using this tree and I will have additional question. Let me know if I should ask them here or open other issues.

For example: I tried to initialise a node as expanded, but I could not. I tried to set expandable: true and state: {expanded: true} on the node model, but could not manage. Is is supposed to work as is, even in case node children are async loaded or the expanded behavior works only on sync node/static tree

Cheers

from vue-tree.

Yeah, let's document the issues separately, that way I can keep track of which I would just add to 5.x and which I would add to both 5.x and 3.x.

For the expanded async children, it looks like there's no handling for expanded children with their own async children (though there should be). That should go in as an issue. If you'd be good enough to enter the issue for me, I'll let you decide if you want it for 3.x as a thank you for finding these cases for me. :)

An alternative fix in the meantime would be similar to the hack you used above, where you could handle the treeViewNodeChildrenLoad event and collapse/expand the children that need the async loader to fire for their own children.

from vue-tree.

Okay, I am opening new issues!

from vue-tree.