While exploring the functionality of AG-Grid with the example provided at this link [, I am currently experimenting with the numeric editor feature.
I found this example on the official AG-Grid website [https://www.ag-grid.com/javascript-grid-cell-editor/#example-cell-editing-using-angular-components]
An observation I've made is that even in the example provided by AG-Grid, the backspace functionality seems to be not working as expected.
Being relatively new to AG-Grid, any guidance or assistance on this matter would be greatly appreciated!
This snippet shows the code for the numeric-editor.ts file that I am currently utilizing:
import {AfterViewInit, Component, ViewChild, ViewContainerRef} from
"@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: 'numeric-cell',
template: `<input #input (keydown)="onKeyDown($event)"
[(ngModel)]="value" style="width: 100%">`
})
export class NumericEditor implements ICellEditorAngularComp,
AfterViewInit {
private params: any;
public value: number;
private cancelBeforeStart: boolean = false;
@ViewChild('input', {read: ViewContainerRef}) public input;
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
// only start edit if key pressed is a number, not a letter
this.cancelBeforeStart = params.charPress &&
('1234567890'.indexOf(params.charPress) < 0);
}
getValue(): any {
return this.value;
}
isCancelBeforeStart(): boolean {
return this.cancelBeforeStart;
}
// will reject the number if it greater than 1,000,000
// not very practical, but demonstrates the method.
isCancelAfterEnd(): boolean {
return this.value > 1000000;
};
onKeyDown(event): void {
if (!this.isKeyPressedNumeric(event)) {
if (event.preventDefault) event.preventDefault();
}
}
// dont use afterGuiAttached for post gui events - hook into
ngAfterViewInit instead for this
ngAfterViewInit() {
window.setTimeout(() => {
this.input.element.nativeElement.focus();
})
}
private getCharCodeFromEvent(event): any {
event = event || window.event;
return (typeof event.which == "undefined") ? event.keyCode :
event.which;
}
private isCharNumeric(charStr): boolean {
return !!/\d/.test(charStr);
}
private isKeyPressedNumeric(event): boolean {
const charCode = this.getCharCodeFromEvent(event);
const charStr = event.key ? event.key :
String.fromCharCode(charCode);
return this.isCharNumeric(charStr);
}
}