Q-Tree lazy load and checkboxes (ticks) bug

[cipsss]

Hello guys! I started exploring quasar to use in a project rewrite in Vue so far all good, love the framework.

However, i stumbled upon a, what i consider to be a bug with the q-tree component.
If we are using lazy load with the tree to populate the node children (from rest api) the checkboxes dont show until all the children have been populated.
I think if we give the q-tree the “tick-strategy” prop it should still apply to the lazy load feature and show the checkboxes all the time.
In my particular use case, there are alot of nested nodes and the app doesnt expect the user to expand all the tree items so it simply doesnt work this way.

This stackoverflow issue is describing the exact same problem:
https://stackoverflow.com/questions/61489961/q-tree-how-to-add-checkbox-for-all-nodes

Any way to fix this behaviour?

Thank you!

[dobbel]

@cipsss

Please provide a codepen.io demo of your problem so people van help you better. ( very simple to do by extending one of quasar’s example codepens)

[cipsss]

@dobbel sorry, youre right

So i edited the lazy loaded example from q-tree component (https://quasar.dev/vue-components/tree#Lazy-loading )
I only added the prop tick-strategy=“leaf” (can be any strategy) to the q-tree component

What i want is to have the tick checkboxes present for every tree node all the time, not only when a tree node has been expanded to the point where children nodes dont have any children nodes left.
In the codepen example, you can see that only “Node is not expandable” has the checkbox visible, i want all of them to have it.
I hope this is clearer now, if not - don’t hesitate to reply

Codepen link:
https://codepen.io/ciprianlupsa/pen/MWeqoXz?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2F

[dobbel]

@cipsss

I guess that is not possible out of the box. You could create a feature request on github.

Or using slots you can fiddle with your own checkbox using a ticked model like this:( this way you’ll have to implement the ticking strategy yourself…)

https://codepen.io/ontwikkelfabriek/pen/YzWOQoN

I think this is how you want it to behave right?

[cipsss]

@dobbel thanks for the reply and sorry for the late response.
your solution works on paper but the tick strategy is lost, :ticked.sync is also lost - both important things to reduce code. cleanest way would be to somehow resolve the bug only by props or something