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!
You should be able to add the following property to your cellRendererParams
to achieve this:
cellRendererParams: {
...yourOtherParams,
suppressDoubleClickExpand: true
}
Cheers!