How to input decimal numbers in ag-grid cells - decimal

Question

Using numericCellEditor in such way (without cellEditorParams):
var columnDefs = [
{
cellEditor: 'numericCellEditor'
},
]
Decumal numbers (1.25, 3.675 etc.) input is not possible. What cell editor to choose (or, maybe, how to tune numericCellEditor) to work with decimals, i.e. so I could edit values, and in opened editing fields I could'n print letters or other non-numeric symbols, but I could input dot or comma as decimal separator.

Answer 1

Include this
function isCharDecimal(charStr) {
return '.'.indexOf(charStr) === 0;
}
And then isKeyPressedNumeric to
function isKeyPressedNumeric(event) {
const charCode = getCharCodeFromEvent(event);
const charStr = String.fromCharCode(charCode);
return isCharNumeric(charStr) || isCharDecimal(charStr);
}

Answer 2

Check numeric editor example here in the official docs.
You can modify the isKeyPressedNumeric function to something like -
private isKeyPressedNumeric(event): boolean {
const charCode = this.getCharCodeFromEvent(event);
const charAllowed = [".","Backspace"];
const charStr = event.key ? event.key : String.fromCharCode(charCode);
return this.isCharNumeric(charStr) || charAllowed.includes(charStr);
}
Note that this is just an example to allow decimal numbers, you can modify the implementation to suit your requirement.

Answer 3

Add the following function
function isCharDecimal(charStr) {
return !!/\./.test(charStr);
}
And change isKeyPressedNumeric() as following
function isKeyPressedNumeric(event) {
const charCode = getCharCodeFromEvent(event);
const charStr = String.fromCharCode(charCode);
return isCharNumeric(charStr) || isCharDecimal(charStr);
}
Note: This will accept more than one decimal point. :(

Answer 4

As an improvement on the solution offered by Pavel, you could use the following to allow up to one decimal point (but not more than one).
Add this function (where this.eInput is your html input):
function isCharTheFirstDecimal(charStr) {
return !!/\./.test(charStr) && !/\./.test(this.eInput.value);
}
And then change isKeyPressedNumeric to:
function isKeyPressedNumeric(event) {
var charCode = this.getCharCodeFromEvent(event);
var charStr = String.fromCharCode(charCode);
return this.isCharNumeric(charStr) ||
this.isCharTheFirstDecimal(charStr);
}
The other functions used (which are all from the example in the ag-grid documentation here: https://www.ag-grid.com/javascript-grid-cell-editing) are below:
getCharCodeFromEvent(event) {
event = event || window.event;
return typeof event.which == "undefined" ? event.keyCode : event.which;
}
isCharNumeric(charStr) {
return !!/\d/.test(charStr);
}