How to combine ui.context_menu() with aggrid tables?

[Anindya088]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 30},
        {'name': 'Bob', 'age': 25},
    ],
})

# Show col and cell value
def cmenu(e):
    ui.notify(f'{e.args['colId']}: {e.args['value']}')

    # Testing with context menu - DOES NOT UPDATE
    with ui.context_menu():
        ui.menu_item(f'{e.args['colId']}')
        ui.menu_item(f'{e.args['value']}')

    # Testing with normal menu - WORKS
    with ui.menu() as menu:
        ui.menu_item(f'{e.args['colId']}')
        ui.menu_item(f'{e.args['value']}')
    menu.open()

# Attach the context menu event
grid.on('cellContextMenu', lambda e: cmenu(e))

ui.run()

Description

Hi All,

I am trying to figure out if we can use ui.context_menu together with AG Grid tables.
See my code example, the when I right click, the notification is correct, even the normal menu gets created correctly.

But the context menu is always stuck at the first cell that I ever click. It never updates the values on next right clicks.
Is there any other way of doing this? Please let me know on the correct way of doing this.

Thanks a lot for the help,
Anindya

NiceGUI Version

2.14.1

Python Version

Python 3.13.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Thank you for the interesting scenario @Anindya088

TL-DR: You do NOT instantiate another ui.context_menu() when you want to change what's in the context menu.

Rather, you must:

• keep a reference to the context menu (see cmenu in my code),
• when right click comes, clear stuff out (cmenu.clear()),
• and put new stuff back in (with cmenu: then blahblahblah...)

I have also applied type like this: e: GenericEventArguments, just so args shows up blue, not white. It's a personal preference thing. Get rid of it if you don't like it.

from nicegui import ui
from nicegui.events import GenericEventArguments

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 30},
        {'name': 'Bob', 'age': 25},
    ],
})

with ui.context_menu() as cmenu: # keep a reference
    pass

# Show col and cell value
def populate_cmenu(e: GenericEventArguments):
    ui.notify(f'{e.args['colId']}: {e.args['value']}')

    cmenu.clear() # clear stuff out

    with cmenu: # put stuff back in
        ui.menu_item(f'{e.args['colId']}')
        ui.menu_item(f'{e.args['value']}')

# Attach the context menu event
grid.on('cellContextMenu', lambda e: populate_cmenu(e))

ui.run()

[Anindya088]

Hi @evnchn , wow, amazing !! that works like a charm :)
Thanks so much