ag-grid : Disable cell edit on key press and pro grammatically enable row edit with edit button (Angular 2)

Question

I have a edit button on each row and I have set

  defaultColDef: {
    editable: false,
  } 

in the grid options

I want the row to be in edit mode when I click on edit button. My edit button works fine if I set

  defaultColDef: {
    editable: true,
  } 

But it enables keypress edit which I don't want to.

How should I dynamically edit that particular row without setting the editable to true in my defaultColdef ?

On click of edit, I have enabled the this.gridOptions.defaultColDef.editable = true, but no luck!

Answer 1

While defining the columnDefs , give editable: false

On clicking the edit button, for dynamically editing the particular Column/Cell in row use:

this.GridOptions.columnApi.getColumn('employeeName').getColDef().editable = true;

And after finishing the editing use:

 this.GridOptions.columnApi.getColumn('employeeName').getColDef().editable = false;

Answer 2

You can implement onCellClicked method of ag-grid to listen to the click event on your edit button and then use startEditing method to start editing of the corresponding row. Sample code follows:

onCellClicked(value): void {
    if (value.colDef.colId === '<YOUR_EDIT_BUTTON_COL_ID>') {
        this.gridOptions.api.startEditing({
            rowIndex: value.rowIndex,
            colKey: '<col_id_of_first_editbale_col_in_the_row>'
        });
  }
}