ag-grid: startEditing autoColumnDef for Tree View

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!

Kurt W Kurt W · Accepted Answer · 2020-04-23T00:19:27

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!

ag-grid: startEditing autoColumnDef for Tree View

2 Answers