q-tree, q-context-menu

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

  • 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>

    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!

  • @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.

Log in to reply