Angular ag-Grid: custom cell renderer that turns on edit mode over all editable cells in row

Question

I have some problems with making custom cell renderer with menu for edit all row in one click.

First of all I want to render menu icon, on user click the dropdown shows and I select 'edit' option (don't bother about remove option). Ok so I have visual aspect of cell in the definiton of the column:

columnsDefinition.push({
  headerName: '',
  cellRendererFramework: EditRendererComponent,
  cellRendererParams: {
    // params will be here
  }
});

Ok lets go to the next step. I need some extra params, I know how to pass static params of component, but I also need data from the row where my cell is rendered - I don't know how to pass it to the custom renderer component.

This is my EditRendererComponent:

export class EditRendererComponent implements ICellRendererAngularComp {
  isEditing = false;
  params: any;

  agInit(params: ICellRendererParams) {
this.params = params;
  }

  refresh(params: any): boolean {
return false;
  }

editMode() {
// we need to loop thru all rows, find the column with the renderer, and 'cancel the edit mode'.
// otherwise, we will end up with rows that has SAVE buttons appearing but not in edit mode
const renderersInOtherRows = this.params.api.getCellRendererInstances(this.params);

if( renderersInOtherRows && renderersInOtherRows.length > 0 ) {
  for(const wrapper of renderersInOtherRows) {
    if (wrapper.getFrameworkComponentInstance() instanceof EditRendererComponent ) {
      const foundRenderer = wrapper.getFrameworkComponentInstance() as EditRendererComponent;
      if( foundRenderer.isEditing ) {
        foundRenderer.onCancel();
      }
    }
  }
}
this.isEditing = true;
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}

onCancel() {
this.isEditing = false;
// restore previous data or reload
}
onSave() {
this.isEditing = false;
// do your saving logic
}
}

Summary, I need help with:

1) Pass record data to the renderer component

2) editMode() method doesn't work at all, any ideas how it should be resolved to make all cells editable (only when columns def editable is set to true)?

your question about edit mode is unclear. I would suggest to either edit it or split it into separate questions — Pratik Bhat
@PratikBhat I want to achive excatly the same thing like default fullRow edit mode, but on button (that I render in customCellRenderer) click: ag-grid.com/javascript-grid-cell-editing/… and the button makes only his row editable — Dominik Z

Pratik Bhat Pratik Bhat · Accepted Answer · 2020-06-06T00:19:23

You need not pass data through cellRendererParams. Inside your cell renderer component you can access row data using params.

  agInit(params: any): void {
    this.params = params;
    data = params.data // access row data here
  }

If you take a look at this example from docs, you need to implement your button click similar to the example. The way you have it in your code should do the trick.

You just need to add [suppressClickEdit] = true to your gridOption so edit is activated only via button click. And you are ensuring only the current row is active for editing by passing rowIndex to the startEditing api.

Your editMode() which I assume is called on click of edit button should be really simple something like this -

editMode() {
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}

Angular ag-Grid: custom cell renderer that turns on edit mode over all editable cells in row

1 Answers