Basic Cell Editing

Let's look at basic cell editing in ag-Grid in the UI.

Start Editing

If you have colDef.editable=true set for a column, editing will start upon any of the following:

• Edit Key Pressed: One of the following is pressed: Enter, F2, Backspace, Delete. If this happens then params.keyPress will contain the key code of the key that started the edit. The default editor will clear the contents of the cell if Backspace or Delete are pressed.
• Printable Key Pressed
• 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.

Tab Navigation

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.

Stop / End 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 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 Escape key is pressed, editing will stop. Unlike Enter, the Escape 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.

Editable as a Function

You can also make the editable property a function. In the video we create a function that only allows last names starting with "R" to be edited:

editable: (params) => {
  if (params.data.lastName.substring(0,1) === "R") return true;
    }

Up next, we'll learn about the provided cell editors.