Ag-Grid Prevent tree expand/collapse when double clicking on cell

Question

I have some code in my grid where I'm trying to prevent a double-click event from causing a tree row to expand/collapse and I can't find documentation how to do this anywhere. The reason I want to do this is so that when I double click the cell, I want to make it editable, but due to some technical necessities, I need to run gridApi.redrawRows() when the collapse/expand happens which causes the edit field to lose focus, meaning I can never actually edit the cell by double clicking.

I'm using the following ag-grid module versions

"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"ag-grid-enterprise": "^22.1.1"

And the relevant html in my grid looks like this

<ag-grid-angular
        #agGrid
        class="ag-theme-balham"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [treeData]="true"
        (rowGroupOpened)="onRowGroupOpened($event)"
        (cellDoubleClicked)="handleCellDoubleClicked($event)"
        [getDataPath]="getDataPath"
        [defaultColDef]="defaultColDef"
        [frameworkComponents]="frameworkComponents"
        [autoGroupColumnDef]="autoGroupColumnDef"
        (gridReady)="onGridReady($event)"
        [getRowNodeId]="getRowNodeId"

      >
</ag-grid-angular>

In my component file, the particular column that is responsible for auto grouping the rows in a tree-format looks like this

ngOnInit() {
   this.autoGroupColumnDef = {
      editable: this.isAllowedtoEdit,
      headerName: "Account #",
      sortable: true,
      lockPosition: true,
      resizable: true,
      field: "accountNum",
      filter: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
        innerRenderer: 'AccountNameColumnDisplayer',
      },
    };
}

And the function for handling the double click on a cell is this:

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      cell.event.stopPropagation();
      return false;
    }
  }

My handleCellDoubleClicked() function doesn't seem to do anything. It runs but the row still expands/collapses when I double click.

I even tried this just to see what it would do and it was causing some really weird behaviors to happen

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      cell.node.setExpanded(false)
    }
  }

And finally, when I try to focus on

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      setTimeout(() => {
         this.gridApi.startEditingCell({
           rowIndex: node.rowIndex,
           colKey: 'accountNum'
         });
      }, 125);
    }
  }

I get a warning in the console telling me that ag-grid does not recognize the column accountNum

So I'm at a bit of a loss right now. Is there something I can do? Thanks in advance!

Kurt W Kurt W · Accepted Answer · 2020-04-21T17:38:46

You should be able to add the following property to your cellRendererParams to achieve this:

cellRendererParams: {
        ...yourOtherParams,
        suppressDoubleClickExpand: true
    }

Cheers!

Ag-Grid Prevent tree expand/collapse when double clicking on cell

1 Answers