Angular: ag grid navigateToNextRow Callback does not know this

Question

Following the Example of ag-grid https://www.ag-grid.com/javascript-grid-selection/#deep-dive-example-using-for-each-node i want to implement a method which changes the selection of a row using the Keyboard Errors.

Here is my Code:

 <ag-grid-angular #agGrid class="ag-theme-bootstrap" headerHeight="36" rowHeight="43"
    [rowData]="rowData | async" [columnDefs]="columnDefs" [rowSelection]="rowSelection" 
    [ [navigateToNextCell]="myNavigation"
    (gridReady)="onGridReady($event)" (rowDataChanged)="onRowDataUpdated()"
    >
  </ag-grid-angular>

  gridColumnApi;
  gridApi;

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    }

myNavigation(params) {
    console.log('nav');
    console.log(this.gridApi);
    var previousCell = params.previousCellDef;
    var suggestedNextCell = params.nextCellDef;

    var KEY_UP = 38;
    var KEY_DOWN = 40;
    var KEY_LEFT = 37;
    var KEY_RIGHT = 39;

    switch (params.key) {
      case KEY_DOWN:
        previousCell = params.previousCellDef;
        console.log(params);
        this.gridApi.forEachNode((node) => {
          if (previousCell.rowIndex + 1 === node.rowIndex) {
            node.setSelected(true);
          }
        });
        return suggestedNextCell;
      case KEY_UP:
        previousCell = params.previousCellDef;
        // set selected cell on current cell - 1
        this.gridApi.forEachNode((node) => {
          if (previousCell.rowIndex - 1 === node.rowIndex) {
            node.setSelected(true);
          }
        });
        return suggestedNextCell;
      case KEY_LEFT:
      case KEY_RIGHT:
        return suggestedNextCell;
      default:
        throw "this will never happen, navigation is always one of the 4 keys above";
    }
  }

The Problem is, that inside the Method MyNavigation i can Access 'this'. I get the error "can not Access gridApi of undefined." When i log 'this' to the console i get undefined. Does anyone know what i did wrong?

Aamir Aamir · Accepted Answer · 2019-10-02T22:10:43

Extra starting square bracket before navigateToNextCell might be breaking it, should throw a template parse error though. Looks like gridReady event isn't firing. Tried to comment this instead of answering but it won't let me.

Also use previousCellPosition and nextCellPosition instead of previousCellDef and nextCellDef.

You might also need to bind your function with the controller in the constructor using

this.myNavigation = this.myNavigation.bind(this);

Or use an arrow function.

Angular: ag grid navigateToNextRow Callback does not know this

1 Answers