Start / Stop Cell Editing

This page discusses the different ways in which Cell Editing can be started and stopped.

Start Editing

Assuming editable=True or editable has a function that returns True for the Column Definition, editing will start
upon any of the following:

Edit Key Pressed: One of the following is pressed: <kbd>↵ Enter<kbd>, <kbd>F2<kbd>.
Backspace: The default editor will start and clear the contents of the cell if <kbd>Backspace<kbd> is pressed on
Windows. To mimic this behavior on MacOS, use the enableCellEditingOnBackspace=True on Grid Option.
Printable Key Pressed: Any of the following characters are
pressed: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!"£$%^&*()_+-=[];\'#,./\|<>?:@~{}
The default editor places this character into the edit field so that the user experience is they are typing into the
cell.
Mouse Double Click: If the mouse is double-clicked. There is a grid property 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.

Stop Editing

The grid will stop editing when any of the following happen:

Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.
Enter Key Down: If the grid receives an <kbd>↵ Enter<kbd> key press event on the cell.
Escape Key Down: Similar to <kbd>↵ Enter<kbd> , if <kbd>Esc<kbd> key is pressed, editing will stop.
Unlike <kbd>↵ Enter<kbd> , the <kbd>Esc<kbd> action will discard changes rather than taking the new value.
Tab Key Down: Editing will stop, accepting changes, and editing will move to the next cell, or the previous cell
if <kbd>⇧ Shift<kbd> is also pressed.
Popup Editor Closed: If using popup editor, the popup is configured to close if you click outside the editor.
Closing the popup triggers the grid to stop editing.

While editing, if you hit <kbd>↹ Tab<kbd> , the editing will stop for the current cell and start on the next cell. If
you hold down <kbd>⇧ Shift<kbd> + <kbd>↹ Tab<kbd>, 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 <kbd>↵ Enter<kbd> 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:

enterNavigatesVertically: Set to True to have <kbd>↵ Enter<kbd> key move focus to the cell below if not editing.
The default is <kbd>↵ Enter<kbd> key starts editing the currently focused cell.
enterNavigatesVerticallyAfterEdit: Set to True to have <kbd>↵ Enter<kbd> key move focus to the cell below after
<kbd>↵ Enter<kbd> is pressed while editing. The default is editing will stop and focus will remain on the editing
cell.

The example below demonstrates the focus moving down when <kbd>↵ Enter<kbd> is pressed.

Single-Click Editing

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 Grid Option:

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 property.

The grid below has singleClickEdit = True so that editing will start on a cell when you single-click on it.

No-Click Editing

It is possible to configure the grid so neither Single-Click nor Double-Click starts editing. To do this set the Grid
Option:

dashGridOptions = {"suppressClickEdit": True}

This is useful when you want to start the editing in another way, such as including a button in your cell renderer.

The grid below has suppressClickEdit = True so that clicking doesn’t start editing. The grid configures a Cell
Renderer with a button to start editing.

View Custom Cell Renderer used for this example.

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.EditButton = function (props) {
    function onButtonClicked() {
        props.api.startEditingCell({
            rowIndex: props.rowIndex,
            colKey: props.column.getId(),
        });
    }

    return React.createElement('span', {}, [
        React.createElement(
            'button',
            {onClick: onButtonClicked, style: {padding: 5},},
            '✎'
        ),
        React.createElement(
            'span',
            {style: {paddingLeft: '4px'},},
            props.value
        ),
    ]);
};

Stop Editing When Grid Loses Focus

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 (for example, 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 Option:

dashGridOptions = {"stopEditingWhenCellsLoseFocus": True}

The example below shows the editing with 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.

Cell Editor Components

Note that Cell Editing can also be performed via Cell Editor Components: