Passing KeyPress/Enter event from column to cell renderer

Question

I am defining a grid in which for the one of the columns I am using a cellRenderer to display an . While everything works fine I would like add the functionality where in if a user navigates/focuses on that cell ( defined by this column ) and hits ENTER the cursor/focus should make the input text editable. My knowledge of angular/ag-grid is very very basic, so please do excuse me if there are any fundamental flaws.

Here is my colDef

testField : ColDef {
    headerName: 'testField',
    field: ' testField',
    cellRenderer: 'inputCellRenderer'
}

InputCellRenderer.ts

@Component({
    selector: 'app-input-field',
    template: '<mat-form-field>
                 <input mat-input type="text" [(ngModel)]="model" [(ngModelChange)}="HandleChange()">{{model}}</input>
               </mat-form-field>
})

export InputRenderer extends ICellRendererAngularComp {
    public model:string;

    refresh(params : any): void {
       // refresh logic
    }

    agInit(params : any) : void {
       // initialize "model"
    }

    HandleChange(): void {
        // handle model change logic
    }
}

When a user focuses on a cell defined by "testField" and presses ENTER I want the cursor/focus to be on the input text field. If I make the column editable by adding

   editable: true

it does not help as it does not pass the change in state to the rendered component.

I need to do something similar to this in the InputRenderer to enable focus

@Component({
    selector: 'app-input-field',
    template: '<mat-form-field>
                 <input #inputText mat-input type="text" [(ngModel)]="model" [(ngModelChange)}="HandleChange()">{{model}}</input>
               </mat-form-field>
})

export InputRenderer extends ICellRendererAngularComp {
    public model:string;
    @ViewChild('inputText') textField : ElementRef

     /* I THINK THIS NEEDS TO BE CALLED AS A CALLBACK FROM THE GRID CELL. GRID CELL SHOULD LISTEN to KEYPRESS/ENTER events and call this */
    focusCallBack() {
       this.textField.nativeElement.focus()
    }

    refresh(params : any): void {
       // refresh logic
    }

    agInit(params : any) : void {
       // initialize "model"
    }

    HandleChange(): void {
        // handle model change logic
    }
}

Any help on achieving this will be very helpful

I am using ag-grid. However the rendered cell is using angular material input to take in user inputs — Tsst
– Tsst, Commented Apr 17, 2019 at 22:24

Paritosh · Accepted Answer · 2019-04-18 07:00:04Z

2

You need to use ICellEditorAngularComp for editing it, while it seems that you are using ICellRendererAngularComp.
Enable editing by editable: true in ColDef.

testField: ColDef = {
  headerName: 'testField',
  field: ' testField',
  cellEditorFramework: inputCellRenderer,
  editable: true
}

Reference: Angular Editor Components

@ViewChild('inputText') textField: ElementRef;

Set the focus programmatically in afterGuiAttached function of the editor component.

  afterGuiAttached?(params?: IAfterGuiAttachedParams): void {
      this.textField.nativeElement.select();
  }

The third step will set your keyboard focus to the textbox.

answered Apr 18, 2019 at 7:00

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tsst Over a year ago

Thank you, Paritosh. This seems to be the right way to approach this. I am still working on the functionality and will update this thread once it is fully functional

Collectives™ on Stack Overflow

Passing KeyPress/Enter event from column to cell renderer

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related