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
You can follow this approach to create a click event in cell renderer.
First : Create Button Cell
create button cell renderer as an Angular component 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 component as follows
// app/app.component.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
}