CODEWITHSUNDEEP
angularag-grid
Stefan Weber
Stefan Weber

Reputation: 1

Ag-Grid Angular 2 keyboard navigation in cellEditing mode

I built my own cellEditor like in the example from https://www.ag-grid.com/ to make a Cell only accept number input. This works fine, but now the keyboard navigation behavior is different to a normal text-cell without own cellEditor. If I hit the left or right key it cancel EditMode, leaves the cell and select another instead of walk through all chars step by step in input field. I tried different things but I cant get it to work. How can I achieve this normal behavior in a own cellEditor? 

import {Component, ViewContainerRef, ViewChild, AfterViewInit} from '@angular/core';

import {AgEditorComponent} from 'ag-grid-ng2/main';

@Component({
    selector: 'numeric-cell',
    template: `<input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">`
})
export class NumericEditorComponent implements AgEditorComponent, AfterViewInit {
    private params: any;
    public value: number;
    private cancelBeforeStart: boolean = false;

    @ViewChild('input', {read: ViewContainerRef}) public input: any;


    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;*/
        return false;
    }

    // will reject the number if it greater than 1,000,000
    // not very practical, but demonstrates the method.
    isCancelAfterEnd(): boolean {
        /*return this.value > 1000000;*/
        return false;
    };

    onKeyDown(event: any): void {
        if (!this.isKeyPressedNumeric(event) && !this.isKeyPressedArrow(event)) {
            if (event.preventDefault) {
                event.preventDefault();
            }
        }
    }

    // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
    ngAfterViewInit() {
        this.input.element.nativeElement.focus();
    }

    private getCharCodeFromEvent(event: any): any {
        event = event || window.event;
        return (typeof event.which == "undefined") ? event.keyCode : event.which;
    }

    private isCharNumeric(charStr: any): boolean {
        return !!/\d/.test(charStr);
    }

    private isKeyPressedNumeric(event: any): boolean {
        var charCode = this.getCharCodeFromEvent(event);
        var charStr = String.fromCharCode(charCode);
        return this.isCharNumeric(charStr);
    }

    private isKeyPressedArrow(event: any): boolean {
        console.log("isKeyPressedArrow");
        var charCode = this.getCharCodeFromEvent(event);
        console.log(charCode);
        var bol = this.isKeyArrow(charCode);
        console.log(bol);
        return this.isKeyArrow(charCode);
    }

    private isKeyArrow(charStr: any): boolean {
        return /^37|38|39|40/.test(charStr);
    }
}

Upvotes: 0

Views: 1142

Answers (1)

Sean Landsman
Sean Landsman

Reputation: 7179

Take a look at the MoodEditor supplied in the ng2-examples repo: https://github.com/ceolter/ag-grid-ng2-example/blob/master/systemjs_aot/app/mood-editor.component.ts

If you look at the onKeyDown method there you'll see that it's looking for left/right keystrokes and if found does some business logic and then stops prog

onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key == 37 ||  // left
        key == 39) {  // right
        this.toggleMood();
        event.stopPropagation();
    }
}

The main part for you would be to add event.stopPropagation(); to onKeyDown

Upvotes: 2

Related Questions