Ag-grid: When editing cell, keyboard navigation shall be disabled

0

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?

xwb1989 picture xwb1989  ·  24 May 2016

Most helpful comment

3

@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();
}
};

eikishi01 picture eikishi01  ·  4 Jan 2017

All comments

0

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

noherczeg picture noherczeg  ·  27 May 2016
0

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

xwb1989 picture xwb1989  ·  27 May 2016
0

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

noherczeg picture noherczeg  ·  27 May 2016
0

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.

ceolter picture ceolter  ·  1 Jun 2016
0

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();
}
};

Jeet0027 picture Jeet0027  ·  10 Nov 2016
-2

@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

prabhakerb picture prabhakerb  ·  4 Jan 2017
3

@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();
}
};

eikishi01 picture eikishi01  ·  4 Jan 2017
0

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.

ceolter picture ceolter  ·  6 Jan 2017
0

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

LucasSeveryn picture LucasSeveryn  ·  6 Jun 2018