QTree - Reload or refresh the tree (lazy loading enabled)

[joeyezekiel]

Hi,
I am trying to reload my lazy loading tree to its initial state. On clicking the reload button, I clear the expanded array, root nodes and call my init function. Now, the root nodes are added but are not expandable. Any ideas? This is the sample code that I use:

this.selected = ''
this.expanded.length = 0
this.rootNodes.length = 0
this.initTree() //calls the ajax method which has this.rootNodes.push(....)

But the root nodes added to the tree after reloading are not expandable. I may be doing this the wrong way. Any help would be appreciated. Thanks.

[joeyezekiel]

@rstoenescu Is refreshing the tree possible? Any other method?

[rstoenescu]

You’re in full control of what QTree displays. If you need same nodes to maintain the expanded state, then don’t reset this.expanded

[joeyezekiel]

@rstoenescu Thanks for your reply. But the whole issue is that I need to reset my entire tree without maintaining the state.

However, I’ve also noticed that when I dynamically add a node that was previously a part of the expanded array before it was removed, the newly added node with the same old key is not expandable anymore with lazy load switched on. The toggle arrow does not show up. This may be related to the same issue I’ve mentioned above.

[rstoenescu]

Please do a jsfiddle and I’ll show you where you go wrong.

[John]

@joeyezekiel, I think this happens if you use lazy load AND mess with the model (:nodes) after initialization. You might provide your own ‘lazy load’ implementation.

Using the Vue dev tools inspecting QTree’s state, I see that changes to “expanded.sync” are indeed reflected in the tree’s internal state. However, when reloaded, for every node in the expanded array the “@onlazyload” method would have to be fired, but this does not happen.
My assumption: the tree does only know about the nodes of the inital model provided. Since the “@onlazyload” handler is never triggered it will not load the children of the expanded nodes and keep them closed.

[tandrew]

I ran into the exact same issue as @joeyezekiel but could not find a solution to this problem here or anywhere.

I figured out that there is a property called “lazy” which is part of the tree. This stores which nodes have been lazy loaded already. When the tree data array is reset (e.g. this.rootNodes.length = 0) then this obviously does not affect the “lazy” object of the tree which remains filled with all the node-keys which had been previously expanded. So when you load up the tree with the same data again (same node-keys), then all keys which are also stored in “lazy” will not show the expand arrow and will not lazy load any longer.

My (simple) solution to this issue was to simply add a statement and clear the lazy object like so: “this.$refs.treeName.lazy = {}” when also resetting the tree data.

I have no idea whether this breaks anything, but it seems to work for me.

Unless this is the appropriate way to deal with it, it would be really cool to have a method to clear the tree which takes care of all the necessary.

Hope it helps someone. Please correct if I am on the wrong path.

[Theo]

Same issue, this.$refs.treeName.lazy = {}, works for me, thanks for this

[rstoenescu]

Please check quasar v1.0.0-beta.13.

[vzz3]

I ran into the same issue with quasar v1.11.1. However, the workaround “this.$refs.treeName.lazy = {};” still works. Thanks to @tandrew for sharing this workaround!