Use Enter key to navigate to cell below in AG-Grid

Question

We need to edit the cell navigation in AG-Grid but I am not finding a way to do what we need. This is not a huge change but a crucial change for our users. The navigation rules we need is similar to Google Spreadsheet cell navigation.

The following rules should apply:

• Pressing enter will focus the cell (is default)
• Pressing enter again will stop editing + move focus to cell below
• shift+enter should stop edit + move focus to cell above
• Arrow keys and Tab etc. should work like normal

We are using AngularJS.

Answer 1

EDIT:

This feature has been added to AG-Grid! Documentation here.

Original (Outdated) answer:

We ended up asking on AG-Grid forum. There was no easy or clean way to do this. Basically you add an event to the grid that listens to 'Enter' being pressed and then manually move the focus down one row.

You have to know if the user is currently editing when the 'Enter' event is fired and also watch out if the user is on the last line.

gridDiv.addEventListener('keydown', function(evt) {
  if(editing && evt.key === 'Enter') {
      var currentCell = gridOptions.api.getFocusedCell();
      var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;

      // If we are editing the last row in the grid, don't move to next line
      if (currentCell.rowIndex === finalRowIndex) {
          return;
      }
      gridOptions.api.stopEditing();
      gridOptions.api.clearFocusedCell();

      gridOptions.api.startEditingCell({
        rowIndex: currentCell.rowIndex + 1,
        colKey: currentCell.column.colId
      });
  }
});

The editing flag is managed manually in grid options.

var editing = false;

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onCellEditingStarted: function (evt) {
        editing = true;
    },
    onCellEditingStopped: function (evt) {
        editing = false;
    }
};

Here is a working plunker example:
https://plnkr.co/edit/quhyS05SSVzmuDlCErZD?p=preview