I can't get the function key [F1,F2...F12] in keypress event in ag grid

Question

Need help in getting function key on the ag grid because of need to develop some logic in function key but ag grid in not getting the function key in keypress event.

<ag-grid-angular 
  style=" height: calc(65vh - 230px); width: 100%; margin-top: 10px;" 
  class="ag-theme-alpine"
  [columnDefs]="columnDefs" 
  [frameworkComponents]="frameworkComponents" 
  (gridReady)="onGridReady($event)"
  (cellKeyPress)="onCellKeyPress($event)">
</ag-grid-angular>

onCellKeyPress(e) {
  console.log("You Press " + e.event.key);
}

Help someone to get the function key in the key press event in the ag grid in need of creating a custom logic in the function key.

Answer 1

You can capture function key events in Ag-Grid by using the onCellKeyDown event.

Here's an example:

// Demo: https://plnkr.co/edit/R14e2CDHdOGo5tO3?open=app%2Fapp.component.ts

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [defaultColDef]="defaultColDef"
    (cellKeyDown)="onCellKeyDown($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>`,
})

Hope it helps :)