Ag-Grid双击单元格时防止树扩展/折叠

时间:2020-04-09 21:56:42

标签: ag-grid ag-grid-angular

我的网格中有一些代码,试图防止双击事件导致树行扩展/折叠,我找不到任何位置的文档。我要这样做的原因是,当我双击该单元格时,我想使其可编辑,但是由于某些技术上的需要,当发生折叠/展开而导致编辑时,我需要运行gridApi.redrawRows()字段失去焦点,这意味着我永远无法通过双击来实际编辑单元格。

我正在使用以下ag-grid模块版本

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

我网格中的相关html看起来像这样

<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>

在我的组件文件中,负责以树格式自动对行进行分组的特定列如下所示:

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

处理单元格双击的功能是这样的:

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

我的handleCellDoubleClicked()函数似乎没有任何作用。它可以运行,但是当我双击该行时,该行仍会扩展/折叠。

我什至尝试这样做只是为了看看它会做什么,并且这导致了一些非常奇怪的行为的发生

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

最后,当我尝试专注于

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

我在控制台中收到一条警告,告诉我ag-grid无法识别列accountNum

所以我现在有点茫然。有什么我可以做的吗?预先感谢!

1 个答案:

答案 0 :(得分:3)

您应该能够在 cellRendererParams 中添加以下属性,以实现此目的:

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

干杯!