Ag-Grid : How to get the focused cell value

Question

How to get the focused cell value at the time focussing on the cell by using the keyboard arrow keys

Generality

Answer 1

You can either get the focused cell by using

var focusedCell = gridOptions.api.getFocusedCell();

or use the onCellFocused event.

Both give you the following properties:

• rowIndex: number
• column: Column

Use the row-index to retrieve the row-node:

var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

After that you can use those properties to retrieve the raw value of the cell:

var cellValue = gridOptions.api.getValue(colKey, row.node)

Earthenware

@Generality - I know it's been almost a month since you solved this, but do you have an example of how you implemented this with keyboard navigation? Thanks! – Biannulate

Selected row is not always focused row, so this did the trick for me. Keep it up! – Newfeld

how do you get colKey? – Wedekind

@PhilippMunin params.column.colId – Flashbulb

Answer 2

I'm not sure if the API changes between UI library bindings, but this worked for me with vue:

 const cellFocused = (evt) => {
  const focusedCell =  evt.api.getFocusedCell();
  const row = evt.api.getDisplayedRowAtIndex(focusedCell.rowIndex)
  const cellValue = evt.api.getValue(focusedCell.column, row)
  console.log("xxx cell was value", cellValue);
};

Armour

Answer 3

Alex's answer might have worked in past but not now. Row.node does not exist, and colSelected is the string representation of the column Header not the Id. The simplest way to get a selected cell's value (Either upon clicking or right clicking) is:

let colSelected = params.column.colId;
let selectedCell = gridOptions.api.getFocusedCell();
let row = gridOptions.api.getDisplayedRowAtIndex(selectedCell.rowIndex);

const value = gridOptions.api.getValue(colSelected,row);

Flashbulb

This is close, but the API has changed slightly and deprecated getValue – Demijohn

Answer 4

The API has changed again:

AG Grid: Since 31.3 api.getValue is deprecated. Please use getCellValue instead.

and I am using the event listener, so:

const gridOptions = {
  // ... your other code

  onCellFocused: (event) => {
    const row = event.api.getDisplayedRowAtIndex(event.rowIndex);
    const cellValue = event.api.getCellValue({
      rowNode: row, 
      colKey: event.column.colId
    });
    console.log('Focused cell value:', cellValue);
  },
};

Demijohn