Vue Data GridStart / Stop Cell Editing

vue logo

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

Start Editing

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

  • Edit Key Pressed: One of the following is pressed: ↵ Enter, F2.
  • Backspace: The default editor will start and clear the contents of the cell if Backspace is pressed on Windows. To mimic this behaviour on MacOS, use the enableCellEditingOnBackspace=true grid option.
  • Printable Key Pressed: Any of the following characters are pressed: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!"£$%^&amp;*()_+-=[];\'#,./\|<>?:@~{}
    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.
  • api.startEditingCell(params): If you call startEditingCell(params) on the grid API

Stop Editing

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

  • Callback stopEditing: The callback stopEditing (from the params above) gets called by the editor. This is how your cell editor informs the grid to stop editing.
  • Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.
  • Enter Key Down: If the grid receives an ↵ Enter key press event on the cell. If you do not want to stop editing when ↵ Enter is pressed, then listen for the event and stop propagation so the grid does not act on the event.
  • Escape Key Down: Similar to ↵ Enter, if ⎋ Esc key is pressed, editing will stop. Unlike ↵ Enter, the ⎋ Esc 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 ⇧ Shift 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.
  • gridApi.stopEditing(): If you call stopEditing() on the grid API.

Start / Stop Events

The following events are fired when editing is started and stopped.