Ag-Grid : Access to the row node/data in the browser's Developer Tools - google-chrome-devtools

Question

When debugging my application with Chrome's Developer Tools I would like to be able to access the row node or the column on a given ag-cell.
I can do it if there is an Angular cellRenderer (using ng.getComponent($0) I can access my Angular component and the params). But is it possible with the default cellRenderer ?

Answer 1

I'd recommend a simple solution: use the cellClicked callback.
(cellClicked)="cellClicked($event)"
and in your component:
cellClicked(params)
{
console.log(params.node)
}
I've created a StackBlitz for your here.

Answer 2

This answer works only if you are using AgGrid within Angular.
I created a function (here in Typescript) that can be included in your app code.
You can then call-it from the Dev Tools:
select an element inside the AgGrid (which must be created using an Angular Component)
in the console, run getAgGridCellInfo($0) (as you would call ng.getComponent($0))
Code to be copied inside your app's code :
/**
* For Dev tool's console, provides an easy access to a cell's Node and column.
* Just :
* * select an element inside the AgGrid (which must be created using an <ag-grid-angular> Angular Component)
* * in the console, run getAgGridCellInfo($0) (as you would call ng.getComponent($0))
*
* #param element HTMLElement ($0 usually)
* #return an object with some information on the row, column and cell
*/
function getAgGridCellInfo(element: HTMLElement) {
if (!element) {
console.error('Call with $0 parameter, after selecting a DOM element inside an AgGrid');
return;
}
function getInheritedAttribute(el: HTMLElement, attributeName: string) {
if (!el) {
throw new Error('Could not find attribute ' + attributeName + ' in parents of ' + element);
}
const elVal = el.getAttribute(attributeName);
return elVal != null ? elVal : getInheritedAttribute(el.parentElement, attributeName);
}
function getAgGridCompontent(el: HTMLElement) {
const comp = window['ng'].getComponent(el);
return comp && comp.constructor.name === 'AgGridAngular' ? comp : getAgGridCompontent(el.parentElement);
}
const rowId = getInheritedAttribute(element, 'row-id');
const colId = getInheritedAttribute(element, 'col-id');
const agGridComp = getAgGridCompontent(element);
const api: GridApi = agGridComp?.api;
const rowNode = api?.getRowNode(rowId);
const colDef = api?.getColumnDef(colId);
const value = colDef && rowNode && api.getValue(colId, rowNode);
return {
api: api,
rowId: rowId,
colId: colId,
rowNode: rowNode,
colDef: colDef,
value: value,
data: rowNode?.data
};
}
window['getAgGridCellInfo'] = getAgGridCellInfo;