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.

Frisby

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

Frisby

Great approach, I added api.clearRangeSelection(); just after clearFocusedCell() since my theme was showing previous row as selected with gray background. – Bathypelagic

Answer 2

You can also use the 'keydown' event to globally track the last key pressed, a variant of your answer.

let eventKey;
let validKeys = ['Enter'];

gridDiv.addEventListener('keydown', function(event) {
    eventKey = event.key;
});

onCellEditingStopped: function (event) {
    if(validKeys.includes(eventKey)){
        var currentCell = gridOptions.api.getFocusedCell();
        var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;

        if (currentCell.rowIndex === finalRowIndex) {
            return;
        }

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

Celestine

Answer 3

On ag-grid there are 2 inputs you can set to achieve excel style behavior for the Enter key: enterNavigatesVertically and enterNavigatesVerticallyAfterEdit.

See documentation: https://www.ag-grid.com/angular-data-grid/cell-editing-start-stop/#enter-key-navigation

Colorful