Py.Cafe

amward/

dash-ag-grid-conditional-checkbox

Dash AG Grid disable checkbox based on value of

DocsPricing
  • assets/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
"""

 forum question:
 https://community.plotly.com/t/dash-ag-grid-how-to-disable-checkbox/81334/3?u=annmariew

This app shows how to disable a checkbox based on the value of a cell in a different column.
Note that the if the price is None, the check box is set to false and disabled.

"""


import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
    {
        "field": "confirm_price",
        'cellRenderer': 'agCheckboxCellRenderer',
        'cellRendererParams': {'function': 'conditionalCheckbox(params)'}
    }
]

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000, "confirm_price": False},
    {"make": "Ford", "model": "Mondeo", "price": 32000, "confirm_price": False},
    {"make": "Porsche", "model": "Boxster", "price": 72000, "confirm_price": False},
]

app.layout = html.Div(
    [
        html.H3("Dash AG Grid Conditional Checkbox"),
        html.H4("Note that the confirm price checkbox is disabled when the price is None"),
        dag.AgGrid(
            id="grid-conditional-checkbox",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef={"editable": True, "animateRows": False},
            eventListeners={'cellValueChanged': ["updateCheckbox(params)"]}
        ),
    ],
)

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