Add buttons or context menus to individual tree items

[moi90]

Question

Is it possible to add buttons or context menus to individual tree items? Custom content can be added via slots, but how do I make a raw Quasar element talk to my application?

[falkoschindler]

Hi @moi90,

Currently the easiest way is to emit an event which is handled by the ui.tree element:

tree = ui.tree([
    {'id': 'numbers', 'description': 'Just some numbers', 'children': [
        {'id': '1', 'description': 'The first number'},
        {'id': '2', 'description': 'The second number'},
    ]},
], label_key='id')
tree.add_slot('default-body', '''
    <q-btn :props="props" @click="props.tree.$emit('item-click', props.node.description)">Click me</q-btn>
''')
tree.on('item-click', lambda e: ui.notify(e.args))

You can pass any information from props or props.node, respectively. In the QTree documentation you can find more information about the props object (QTree API > Slots > default-body).

[moi90]

Cool, thanks, that works!