AG Grid: Conditional Editing

[sbixl]

Question

Hi,

I am a newbie using nicegui and it's a pleasure to work with it. 👍

Currently I try to implement the basics of the conditional editing feature described on the AG Grid homepage. I want to control the editable status of individual cells like realized in this example.

Unfortunately, I don't know how to pass the argument params to my function is_editable. I have already tried a few things, unfortunately without success.

Minimal example of the problem:

from nicegui import ui


def is_editable_without_args() -> bool:
    print("Without Args")
    return False


def is_editable(args) -> bool:
    print(f"With args = {args}")
    return False


ui.aggrid(
    {
        "defaultColDef": {"flex": 1},
        "columnDefs": [
            {"headerName": "Name", "field": "name", "type": "editableColumn"},
            {"headerName": "Age", "field": "age", "type": "editableColumn"},
            {"headerName": "Parent", "field": "parent", "hide": True},
        ],
        "rowData": [
            {"name": "Alice", "age": 18, "parent": "David"},
            {"name": "Bob", "age": 21, "parent": "Eve"},
            {"name": "Carol", "age": 42, "parent": "Frank"},
        ],
        # "columnTypes": {
        #    "editableColumn": {"editable": is_editable_without_args()}, # <-- this works
        # },
        "columnTypes": {"editableColumn": {"editable": """(params) => { ??? }"""}},
    }
)

ui.run()

Does anyone have any ideas?

[falkoschindler]

Hi @sbixl,

You won't be able to pass Python functions to AG Grid. But we can define the required behavior in JavaScript depending on params and pass it like this:

ui.aggrid({
    "columnDefs": [
        {"headerName": "Name", "field": "name", "type": "editableColumn"},
        {"headerName": "Age", "field": "age", "type": "editableColumn"},
    ],
    "rowData": [
        {"name": "Alice", "age": 18},
        {"name": "Bob", "age": 21},
        {"name": "Carol", "age": 42},
    ],
    "columnTypes": {"editableColumn": {":editable": "(params) => params.data.name != 'Alice'"}},
})

In this case a cell is editable as long as the name of this row isn't "Alice".

Note the leading colon :. It indicates a "dynamic" attribute which needs to be converted to a JavaScript expression in the frontend. Otherwise it would be treated as a string, which is not what we want in this case.

[sbixl]

Many thanks @falkoschindler for the quick reply. Indirectly exactly what I need. Via a hidden column I can now control the editability of several cells in a row.

The world can be so simple! 😊