This page discusses the different ways in which Cell Editing can be started and stopped.
Assuming editable=True
, editing will start upon any of the following:
enableCellEditingOnBackspace=true
grid option.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!"£$%^&*()_+-=[];\'#,./\|<>?:@~{}
singleClickEdit
that will allow single-click to start editing instead of double-click. Another property suppressClickEdit
will prevent both single-click and double-click from starting the edit; use this if you only want to have your own way of starting editing, such as clicking a button in your custom cell renderer.The grid will stop editing when any of the following happen:
While editing, if you hit Tab, the editing will stop for the current cell and start on the next cell. If you hold down Shift+Tab, the same will happen except the previous cell will start editing rather than the next. This is in line with editing data in Excel.
By default pressing Enter will start editing on a cell, or stop editing on an editing cell. It will not navigate to the cell below.
To allow consistency with Excel the grid has the following properties:
enterMovesDown
: Set to True
to have Enter key move focus to the cell below if not editing. The default is Enter key starts editing the currently focused cell.enterMovesDownAfterEdit
: Set to True
to have Enter key move focus to the cell below after Enter is pressed while editing. The default is editing will stop and focus will remain on the editing cell.import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [
{"field": "country"},
{"field": "year"},
{"field": "athlete"},
{"field": "age"},
]
app.layout = html.Div(
[
dcc.Markdown(
"This grid demonstrates the focus moving down when Enter is pressed."
),
dag.AgGrid(
id="editing-start-stop-example",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"editable": True},
dashGridOptions={"enterMovesDown": True, "enterMovesDownAfterEdit": True},
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=False)
This grid demonstrates the focus moving down when Enter is pressed.
The default is for the grid to enter editing when you Double-Click on a cell. To change the default so that a single-click starts editing, set the property dashGridOptions={"singleClickEdit": True},
. This is useful when you want a cell to enter edit mode as soon as you click on it, similar to the experience you get when inside Excel.
It is also possible to define single-click editing on a per-column basis using singleClickEdit = True in the
columnDefs` prop.
The grid below has singleClickEdit = True
so that editing will start on a cell when you single-click on it.
"""
The example below demonstrates the focus moving down when Enter is pressed.
"""
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [
{"field": "country"},
{"field": "year"},
{"field": "athlete"},
{"field": "age"},
{"field": "date"},
{"field": "sport"},
{"field": "total"},
]
app.layout = html.Div(
[
dcc.Markdown(
"This grid demonstrates that editing will start on a cell when you single-click on it."
),
dag.AgGrid(
id="single-click-edit-example",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"editable": True},
dashGridOptions={"singleClickEdit": True},
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=False)
This grid demonstrates that editing will start on a cell when you single-click on it.
By default, the grid will not stop editing the currently editing cell when the cell loses focus, unless another cell is clicked on. This means clicking on the grid header, or another part of your application, will not stop editing. This can be bad if, for example, you have a save button, and you need the grid to stop editing before you execute your save function (e.g. you want to make sure the edit is saved into the grid’s state).
If you want the grid to stop editing when focus leaves the cell or the grid, set the grid property dashGridOptions={"stopEditingWhenCellsLoseFocus": True}
The example below shows the editing with dashGridOptions={"stopEditingWhenCellsLoseFocus": True}
. Notice the following:
Double-click a cell to start editing, then click outside the grid (or on a header) and the grid will stop editing.
"""
The example below demonstrates the focus moving down when Enter is pressed.
"""
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [
{"field": "country"},
{"field": "year"},
{"field": "athlete"},
{"field": "age"},
{"field": "date"},
{"field": "sport"},
{"field": "total"},
]
app.layout = html.Div(
[
dcc.Markdown(
"This grid demonstrates that clicking outside the grid will stop the editing and keep the edits."
),
dag.AgGrid(
id="grid-focus-example",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"editable": True},
dashGridOptions={"stopEditingWhenCellsLoseFocus": True},
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=False)
This grid demonstrates that clicking outside the grid will stop the editing and keep the edits.
Cell Editing can also be performed via Cell Editor Components