Good day, All,
I hope that this trick helps you out when designing interactions with the grid.
When working with user inputs in the grid, sometimes it is necessary to keep columns non-editable under certain circumstances. To have a conditional edit, you need to pass a function to the editable prop for that columnDef.
It is possible to access the JS parsed version in other functions, this is attainable through this:
params.colDef.editable(params)
When pairing this with cellClassRules, it allows you to apply styling to all conditionally disabled editable columns:
"cellClassRules": {"disabled": "!params.colDef.editable(params)"}}
This is a really neat way to help users know what cells are editable vs not when you also add styling like such:
.disabled {
background: repeating-linear-gradient(
-45deg,
rgba(0,0,0,0.02),
rgba(0,0,0,0.02) 10px,
rgba(0,0,0,0.04) 10px,
rgba(0,0,0,0.04) 20px
);
border: none;
}
When we put it all together and run something like the below:
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash(__name__)
columnDefs = [
{"headerName": "Row ID", "valueGetter": {"function": "params.node.id"}, "editable": False,
"cellClass": "disabled"},
{"field": "make", "editable": True},
{"field": "model"},
{"field": "price"},
]
data = [
{"make": "Toyota", "model": "Celica", "price": 35000},
{"make": "Ford", "model": "Mondeo", "price": 32000},
{"make": "Porsche", "model": "Boxster", "price": 72000},
{"make": "BMW", "model": "M50", "price": 60000},
{"make": "Aston Martin", "model": "DBX", "price": 190000},
]
app.layout = html.Div(
[
dcc.Markdown("This grid has a different styling for non-editable cells"),
dag.AgGrid(
id="grid-ids-example",
columnDefs=columnDefs,
rowData=data,
columnSize="sizeToFit",
defaultColDef={"resizable": True, "sortable": True, "filter": True,
"editable": {"function": "params.data.make == 'Toyota'"},
"cellClassRules": {"disabled": "!params.colDef.editable(params)"}},
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run_server(debug=True)
It turns into something like this:
If you edit the make column to “Toyota”, it will allow model and price to be editable as well.
