When editing cell, keyboard navigation shall be disabled

[xwb1989]

When editing a cell, keys like left and right arrow are not moving the cursor between characters within the cell, instead, it just move the focus to the neighbor cell. Shall keyboard(left,right,up,down arrows) navigation be disabled when editing a cell? Or is there a way to do so in current version?

[noherczeg]

You can override this behaviour. This won't look pretty at all, but currently we fall back to methodologies like the following:

Example pulled from our source and stripped for brevity:

var row = this.gridOptions.api.rowModel.getRow(rowIndex);
var columnController = row.columnController;
var columns = columnController.getAllColumns();
for (var idxC = 0; idxC < columns.length-1; idxC++) {
    var column = columns[idxC];
    var nextColumn = findNextEditableColumn(columns, idxC, idxC);
    // Prevent "mutable variable is accessible from closure":
    (function (column, nextColumn, rowIndex, columnController) {
            var renderedCell = columnController.context.beans.rowRenderer.beanInstance.renderedRows[rowIndex].getRenderedCellForColumn(column);
            renderedCell.onNavigationKeyPressed = function (event, key) {
                // your stuff
            };
    })();
}

See: renderedCell.ts:436

[xwb1989]

Looks like this solution is a deep diving into the code! Thanks for sharing!

[noherczeg]

@xwb1989 We had to because row level editing is not supported.

[ceolter]

fixed in current version. left and right arrow keys now move cursor within the cell. i didn't change up and down arrow keys as i don't see the point in allowing this in a text field.

[Jeet0027]

Do the following changes in ag grid js file. Will work

RenderedCell.prototype.onNavigationKeyPressed = function (event, key) {
if (!this.editingCell) {
//this.stopRowOrCellEdit();
this.rowRenderer.navigateToNextCell(key, this.rowIndex, this.column, this.node.floating);
event.preventDefault();
}
};

[prabhakerb]

@ceolter I don't see this working in latest ag-grid. do I need to use any grid options?. However the above code changes fixed the problem

[eikishi01]

@prabhakerb I'm in the editing page of the wiki, and when using the quick editor it works, but when implementing a custom editor like the Numeric Editor the left/right arrows go back to cell navigation. To Add it to a custom editor, add the following based on the same example.

// gets called once before the renderer is used
NumericCellEditor.prototype.init = function(params) {
// MORE CODE HERE
this.eInput.addEventListener('keydown', function(event) {
that.onKeyDown(event);
});
// MORE CODE HERE
};

NumericCellEditor.prototype.onKeyDown = function(event) {
var key = event.which || event.keyCode;
if (key === 37 || // left
key === 39) { // right
event.stopPropagation();
}
};

[ceolter]

this is the key: event.stopPropagation();
you need to block the kev events from getting to the grid if you dont' want the default navigation.

[LucasSeveryn]

fixed in current version. left and right arrow keys now move cursor within the cell. i didn't change up and down arrow keys as i don't see the point in allowing this in a text field.

Agree up and down arrow keys dont make sense - how do we achieve same behaviour as excel? That is, when cell is being edited, and down arrow key is pressed, editing is finished and the cell below is selected