Ag-Grid Prevent API.StopEditing() callback when editing next cell (Angular)

Question

I'm currently working on AG Grid for angular 5. I have an issue with cell editing function. With my click event, I'm enabling editing mode of selected rows column programmatically using the following code

selectedNods.forEach(element => {
    if (element.node.selected)
        element.node.gridApi.startEditingCell({
            rowIndex: element.node.rowIndex,
            colKey: "account"
        });
});

This works fine. But when I enter into a cell for the purpose of editing, all other cells back to normal mode from editing mode.
I want to keep all selected rows specified cells should be editable, even when I'm editing a cell. Please help me.

Paritosh Paritosh · Accepted Answer · 2018-03-14T12:37:53

Full row editing mode will help you instead of cell editing.
Use [editType]="'fullRow'" property of ag-grid.

Once you do this, you can use cellClicked event to make the row/cell editable.

(cellClicked)="onCellClicked($event)"

While in your component,

onCellClicked($event){
  // check whether the current row is already opened in edit or not
  if(this.editingRowIndex != $event.rowIndex) {
    console.log($event);
    $event.api.startEditingCell({
      rowIndex: $event.rowIndex,
      colKey: $event.column.colId
    });
    this.editingRowIndex = $event.rowIndex;
  }
}

Check this live example in Plunk - row editing ag-grid

Ag-Grid Prevent API.StopEditing() callback when editing next cell (Angular)

1 Answers