ag-grid: startEditing autoColumnDef for Tree View - ag-grid

Question

I have an <ag-grid> using Angular and one thing I'm trying to do is when you click a button to add a row to the grid, I want to be able to focus and start editing the input for that row and that column
In the documentation, I have been able to get this working with various columns in various ag-grids in my app by using code like this:
this.gridApi.startEditingCell({
rowIndex: 0,
colKey: 'description'
});
However in one special case in one of my grids, I'm using the tree and autoGroupColumnDef like this:
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[modules]="modules"
[columnDefs]="columnDefs"
[rowData]="rowData"
[treeData]="true"
[getDataPath]="getDataPath"
[defaultColDef]="defaultColDef"
[frameworkComponents]="frameworkComponents"
[groupDefaultExpanded]="groupDefaultExpanded"
[autoGroupColumnDef]="autoGroupColumnDef"
(gridReady)="onGridReady($event)"
(cellValueChanged)="handleChanges($event)"
(columnMoved)="handleColumnChanges($event)"
[getRowNodeId]="getRowNodeId"
[context]="this"
></ag-grid-angular>
And then in my typescript, I have my autoGroupColumnDef defined in my constructor like this:
this.autoGroupColumnDef = {
editable: true,
headerName: "Account #",
field: "accountNum",
filter: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
innerRenderer: 'AccountNameColumnDisplayer',
},
};
The problem is when I try to run the code like this:
this.gridApi.startEditingCell({
rowIndex: 0,
colKey: 'accountNum'
});
I get a warning that says ag-grid-community.cjs.js:27041 ag-Grid: no column found for accountNum
For the record, the data that I supply to this.rowData includes a property called accountNum
Is there something simple here that I'm not noticing or something I'm doing incorrectly? I have looked all over the ag-grid documentation and can't figure out how to solve this. Thanks in advance!

Answer 1

First off, lets be clear about the colKey. The colKey actually isn't directly tied to the field property. From the docs:
Some of the API methods take Column Key (named colKey) which has type
Column | string. This means you can pass either a Column object (that
you receive from calling one of the other methods) or you pass in the
Column ID (which is a string). The Column ID is a property of the
column definition. If you do not provide the Column ID, the grid will
create one for you (first by trying to use the field if it is unique,
otherwise it will generate an ID).
So, the colKey is either the column object itself, or, the colId you set in the column definition, the field property, or a random string (in that order).
Your first instinct may be to go and set the colId property of your autoGroupColumnDef column. But alas! In my experience, agGrid throws another curve ball at you and this will not work either...why?
This is because agGrid always makes the autoGroupColumnDef colId: ag-Grid-AutoColumn
TLDR: use the colKey "ag-Grid-AutoColumn" for autoGroupColumnDef column!
Cheers!

Answer 2

From what I can guess, I don't think your accountNum field is a part of columnDefs.
You need not provide field in autoColumnGroupDef, instead provide accountNum to actual columnDefs something like this -
{
field: 'accountNum',
hide: true,
}
Behind the scenes autoGroupColumnDefs is nothing but ag-grid group cell renderer on the column denoted with rowGroup=true.
Since your data is already in tree format, ag-grid takes care of grouping.
From the docs -
When the grid is working with Tree Data there is no need to explicitly
specify a Column Group as the grid will use the Auto Column Group.
The auto columns generated by the grid use the ag-Grid provided group
cell renderer. This means that gridOptions.autoGroupColumnDef can also
be used to pass additional properties to further customise how your
groups are displayed.
More details here