Event on Home/End keys pressed using cell editing

Question

Using Ag-Grid 8.1.1 (free version) and AngularJS 1.5.8

I have an editable grid.

The default behavior of the grid is Use home and end to go to the first and last rows. (See https://www.ag-grid.com/javascript-grid-keyboard-navigation/?framework=angularjs)

My problem is: while editing a cell, I press the End key to go to the end of the input. And the grid scroll down to the last row.

How can I override this behavior ?

What I did so far:

  onCellEditingStarted: function(gridEvent) {
      $($element).on('keydown.grid', function(jqueryEvent) {
        jqueryEvent.stopPropagation();
        jqueryEvent.preventDefault();
        if (e.key === 'End') {
          myCustomFunction();
        }
      });
    },

myCustomFunction is called, but the default behavior of the grid is not stoped by e.stopPropagation(); e.preventDefault();

Did you try event.stopPropagation(); event.preventDefault(); instead of e.stopPropagation(); e.preventDefault();? — Akash
@akash event is not a JQuery event but an ag-grid event. It is build like this {node: RowNode, data: Object, value: "Nombre", rowIndex: 1, column: Column…}. I change the name in my code. — EloHailwidis

Jarod Moser Jarod Moser · Accepted Answer · 2017-04-11T19:45:44

Easiest answer is set cellEditor: 'popupText' for each column that you want to be able to use the home and end buttons. Here's a plnkr that demonstrates that behavior. I am not sure if this will be viewed as a bug/defect by the developers, but it at least works up to v 9.

Event on Home/End keys pressed using cell editing

1 Answers