Dash AgGrid : Dynamic Cell Dropdown Options (from server callback)

Dash Python
4

Wow!! That is pretty advanced stuff there @jinnyzor (greatness!)
Seems to go deep into the Dash/JS nuts and bolts.

I have no experience with Flask and my head is still spinning, but I kinda half-get it.
Correct me if I’m wrong…

  • dashmantine is imported on the server (python) so that dashmantine-components are ‘known’ in JSScripts
  • the cellEditor calls the JS DMC_Select2() on edit cell
  • the DMC_Select2 inits the dropdownRequest that communicates with the server via python def dynamicOptions (in some ‘magical’ way)
  • JS setProps() is triggered (onChange?) sets the final value of the cell to the one chosen in the dropdown.

I added a callback on cellValueChanged callback for completeness…

### ADD @jinnyzor dashAgGridFunctions.js  IN THE ASSETS FOLDER
import random, json

import dash
from dash import Dash, html, dcc, Input, Output, State, Patch, ctx, MATCH, ALL
import dash_ag_grid as dag
import dash_mantine_components

from flask import jsonify, request


app = Dash(__name__)
columnDefs = [
    {"field": "A"},
    {
        "field": "dynamic_select",
        "editable": True,
        "cellEditor": {'function': "DMC_Select2"},
        "cellEditorPopup": True
    }
]
rowData = [
    {"A": "a1", "dynamic_select": "--"},
    {"A": "a2", "dynamic_select": "--"},
    {"A": "a3", "dynamic_select": "--"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
        ),
        html.Div(id="dynamic_dropdown_option_output"),
    ],
    style={"margin": 20},
)


@app.server.route('/dynamicOptions', methods=['POST'])
def dynamicOptions():
    print(request.json)
    return jsonify([f'  server_query_{random.randint(0,9)}' for i in range(random.randint(1,7))])



@app.callback(
    Output("dynamic_dropdown_option_output", "children"),
    Input("grid", "cellValueChanged"), 
    prevent_initial_call=True,   
)
def after_dropdown_selection(data):     
    if data:
        return (
            "You selected option {} from the colId {}, rowIndex {}, rowId {}.".format(
                data["value"],
                data["colId"],
                data["rowIndex"],
                data["rowId"],
            )
        )
    return "No menu item selected."


if __name__ == "__main__":
    app.run(debug=False)

What I do not understand is

  • where the JS params comes from?
    What if I want to pass other params than data to the control
    Eg. searchable/clearable/creatable/placeholder/error/… etc?

PS1 : Does this dynamicOptions/dropdownRequest thingy also work with dcc or bootstrap dropdowns? or other Dash components / React Components? To get server access ‘before’ anything gets handled?
I’ve had issues switching Mantine with Bootstrap dropdowns. They don’t seem to trigger/behave the same way (something with setProps/onChange/…)

PS2 : Is this something we may see implemented in future versions of Dash Aggrid? (cfr rowMenu’s)