enter code hereI am trying to create edit and delete buttons in same column for every row using angular ag grid. To display the edit and delete buttons, I am using icons. I am able to display the remove and edit icons for every row in ag grid, but i am failing to click those icons. Below are the respective images of that. I tried to click event inside of button but it was not worked, I tried to write click event in icon tag also but it is also not worked. Below is my code which i am using

enter code hereI am trying to create edit and delete buttons in same column for every row using angular ag grid. To display the edit and delete buttons, I am using icons. I am able to display the remove and edit icons for every row in ag grid, but i am failing to click those icons. Below are the respective images of that. I tried to click event inside of button but it was not worked, I tried to write click event in icon tag also but it is also not worked. Below is my code which i am using

• javascript
• angular
• ag-grid
• ag-grid-angular
• ag-grid-react

Share Improve this question Follow edited Mar 24, 2022 at 6:17 dilli asked Feb 13, 2022 at 15:51 dillidilli 311 gold badge11 silver badge55 bronze badges 2

• Please don't share illegible photos of your screen. It's better to share code excerpts as it makes our lives much easier. – Will Alexander Commented Feb 13, 2022 at 15:57
• @WillAlexander I updated my code, Can you look on to it – dilli Commented Feb 13, 2022 at 16:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You can follow this approach to create a click event in cell renderer.

First : Create Button Cell

create button cell renderer as an Angular ponent that implements the ICellRendererAngularComp interface as follows :

@Component({
  selector: 'btn-cell-renderer',
  template: `
    <button (click)="handleClickEvent($event)">Click me</button>
  `,
})
export class BtnCellRenderer implements ICellRendererAngularComp
{
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  handleClickEvent() {
    this.params.clicked(this.params.value);
  } 
 
}

The params object is accessed through the agInit hook.

Second: Register the BtnRenderer in the app module

// app/app.modules.ts

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([BtnCellRenderer]),
  ],
  declarations: [AppComponent, BtnCellRenderer],
  bootstrap: [AppComponent],
})

Third: Use the renderer Use the renderer in your ponent as follows

// app/app.ponent.ts

this.columnDefs = [
      {
        field: 'action',
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          clicked: function(field: any) {
            alert(`${field} was clicked`);
          }
        },
        minWidth: 100,
      }
     
      ];
      
      this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    };

You can follow kplus answer and in order to display two buttons create two renderer and bind them separately with edit and delete button in your columnDefs.

  columnDefs = [
  {
      field: 'edit', cellRenderer: 'editRenderer',
      headerClass: 'my-header-class',
      cellRendererParams: {
        onClick: this.onClickEdit.bind(this)
      }
    },
    {
      field: 'Delete',cellRenderer: 'deleteRenderer',
      headerClass: 'my-header-class',
      cellRendererParams: {
        onClick: this.onClickDelete.bind(this)
      }
    }];
    
     onClickEdit(params) {
     //code
     }
     
     onClickDelete(params) {
     //code
     }
     
     
     
    constructor() {
    this.frameworkComponents = {
      editRenderer: EditComponent,
      deleteRenderer: DeleteCompoenent
    }