q-tree, q-context-menu

[Theo]

Is there a way to use a context menu on a q-tree node?

[s.molinari]

Sure. Just use the body slot and add whatever you’d like in it.

Scott

[Theo]

Just did that and it works perfekt, thanks a lot Scott

[Mickey58]

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?

[Mickey58]

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)?

[Mickey58]

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?

[Mickey58]

I solved it through a simple

<q-item  clickable @click="selectedKeyTreeBaustoffe = node._id; vModelToTriggerDialog = true">

Works like a charm!

[qyloxe]

@Mickey58 The beauty of reactivity in all its glory!

[Mickey58]

Agree: q-tree with context menus supports a user experience that is really “desktop like”, although running in the browser.