[AG Grid] Something wrong when Modify cell value using grid.run_row_method()

[Magic-wei]

Question

Description

Hi all, I'm new to NiceGUI and just work around with examples in the official docs. In AG grid section, I tried to combine codes from different features and got one issue: I modified a cell value using grid.run_row_method('Alice', 'setDataValue', 'age', 99) which could indeed change the value to 99 in the UI, but I didn't monitor any change in the grid's rowData; after execute grid.update(), the value in the UI will change back to the old value instead. The issue can be reproduced with code below. Any idea about this?

Test Environment

• OS: Windows 10 Home, version 22H2
• Virtual environment manager: Conda
• Python version: 3.9.18
• NiceGUI version: 1.4.21

Minimal Reproducible code

Run the code below, and test in the following order:

1. Click the button "Set Alice's age to 99" (Alice's age in the UI will be changed to 99)
2. Click the button "Get Alice's age from grid rowData" (will get 18 instead of 99; expected to be 99)
3. Click the button "Get Alice's age from grid method" (will get 99)
4. Click the button "Run grid.update()" (Alice's age will be changed to 18 in the UI; expected to be 99)
5. Click the button "Get Alice's age from grid rowData" (will get 18; expected to be 99)
6. Click the button "Get Alice's age from grid method" (will get 1; expected to be 99)

from nicegui import ui

ui.label("== Test: Modify Alice's age using grid.run_row_method() ==")

grid = ui.aggrid({
    'defaultColDef': {'flex': 1},
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol', 'age': 42},
    ],
    'rowSelection': 'multiple',
    ':getRowId': '(params) => params.data.name',
}).classes('max-h-40')

def getAliceAgeCb():
    entry = grid.options['rowData'][0]
    ui.notify(f"[Test 1] {entry['name']}'s age: {entry['age']}")

async def getAliceAgeCb2() -> None:
    # define the return of AG grid method
    row = await grid.run_grid_method('(g) => g.getDisplayedRowAtIndex(0).data')
    ui.notify(f"[Test 1] {row['name']}'s age: {row['age']}")

ui.button("Set Alice's Age to 99", on_click=lambda: grid.run_row_method('Alice', 'setDataValue', 'age', 99))
ui.button("Run grid.update()", on_click=lambda: grid.update())
ui.button("Get Alice's age from grid rowData", on_click=getAliceAgeCb)
ui.button("Get Alice's age from grid method", on_click=getAliceAgeCb2)

ui.run()

[falkoschindler]

Hi @Magic-wei,

This is expected behavior. Let me explain:

Calling the generic method grid.run_row_method will run basically arbitrary JavaScript methods on the client. In case of "setDataValue" this will modify the client state, without informing the server about what happened.

Calling ui.update will send the server state to the client. This is usually for updating the client after some change happened on the server. In your case you're reverting the change that happened on the client.

In order to modify row data, you should modify the grid options on the server and call update afterwards, like in this demo.

[Magic-wei]

I see, thank you for your patience, @falkoschindler, that makes sense to me. New knowledge about web app.

[Magic-wei]

For users who are interested in this topic, I rewrite the minimal code below based on @falkoschindler's explanation to show the differences between updating data from client side and from server side.

from nicegui import ui

ui.label("== Test: Modify Alice's age using grid.run_row_method() ==")

grid = ui.aggrid({
    'defaultColDef': {'flex': 1},
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol', 'age': 42},
    ],
    'rowSelection': 'multiple',
    ':getRowId': '(params) => params.data.name',
}).classes('max-h-40')

def setAliceAgeFromServerSideCb():
    grid.options['rowData'][0]['age'] = 25

def getAliceAgeCb():
    entry = grid.options['rowData'][0]
    ui.notify(f"[Test 1] {entry['name']}'s age: {entry['age']}")

async def getAliceAgeCb2() -> None:
    # define the return of AG grid method
    row = await grid.run_grid_method('(g) => g.getDisplayedRowAtIndex(0).data')
    ui.notify(f"[Test 1] {row['name']}'s age: {row['age']}")

ui.button("Set Alice's Age to 99 (client side)", on_click=lambda: grid.run_row_method('Alice', 'setDataValue', 'age', 99))
ui.button("Set Alice's Age to 25 (server side)", on_click=setAliceAgeFromServerSideCb)
ui.button("Run grid.update() (update client side with latest server data)", on_click=lambda: grid.update())
ui.button("Get Alice's age from grid rowData (server side)", on_click=getAliceAgeCb)
ui.button("Get Alice's age from grid method (client side)", on_click=getAliceAgeCb2)

ui.run()