Is there a way to use a context menu on a q-tree node?
s.molinari last edited by
Sure. Just use the body slot and add whatever you’d like in it.
Just did that and it works perfekt, thanks a lot Scott
I would like to change the selected node in the q-tree to the node on top of which a context menu gets right clicked. How can I achieve this?
If I attach the context menu to the q-tree body slot, I’m aware I can access prop.node.field (with one of the fields being the key/id in q-tree) within the context menu’s template.
But how can I programatically change the selected tree node using that prop? I would have to set selectedKeyMyTree (as defined in :selected.sync=“selectedKeyMyTree”) to that prop in some click handler of the context menu? How would that line of code look like?
I figured it out, but as part of testing, realize that I would prefer such a context menu to select a new node in the tree on the header slot, not the body slot of my q-tree.
In the body slot of my q-tree,
<q-menu touch position context-menu> <q-list dense> <q-item clickable @click="selectedKeyMyTree = prop.node._id"> <q-item-section>Select node</q-item-section> </q-item> </q-list> </q-menu>
does the above job to change node selection to the node under the context menu.
Is it possible to have such a context menu on the header slot that is able to change the selected node (and also offer some other actions)?
I did one more experiment, and got a context menu also working on the header-slot. Strangely, in the header slot I had to change the code that assigns the new node in the context menu to
<q-item clickable @click="selectedKeyTreeBaustoffe = node._id">
The code I used in the body slot, if used in the header slot, results in an error that prop and node are undefined:
<q-item clickable @click="selectedKeyTreeBaustoffe = prop.node._id">
Not sure why this works differently, the API doc looks the same for header and body.
Anyway, my last question is: How can I change the selected node in the context menu and subsequently trigger some other method when the user right clicks the context menu?
I solved it through a simple
<q-item clickable @click="selectedKeyTreeBaustoffe = node._id; vModelToTriggerDialog = true">
Works like a charm!
qyloxe last edited by
@Mickey58 The beauty of reactivity in all its glory!
Agree: q-tree with context menus supports a user experience that is really “desktop like”, although running in the browser.