Emit Event from cellRendererFramework to parent

Question

With ag-grid, you can definte your GridOptions.columnDefs with column information including cellRendererFramework. I have a component that I am using for the cellRendererFramework which includes an event that gets triggered from a click on a button within its template. I would like to be able to emit this event to the parent (where the columnDefs are getting defined, and where the ag-grid-angular is initialized from).

I can see that I could just let the event go through ag-grid-angular's cellClicked event... and then I could look at the event to parse out info like the event target and see if it's on the button, etc... but I'm hoping I don't have to do that, and that there is a way to get the event from the cellRendererFramework component ts, up.

---

My GridOption.columnDefs def for this column looks like this:

{
  headerName: 'Actions',
  cellRendererFramework: ActionCellComponent,
  suppressFilter: true,
}

ActionCellComponent has a template with buttons that have click events, like (click)="actions.deleteSchema($event)" and get picked up in the component ts.

I'm hoping to get events from the ActionCellComponent to the AdminComponent which hosts the ag-grid and the columnDefs without having to parse through the cellClicked event.

Answer 1

I had an issue with finding a clean way to do this. You can use this to obtain a reference to the parent component that has initialised the cellRenderer.

import {GridOptions} from "ag-grid";
constructor(){ 
    this.gridOptions = <GridOptions>{
        context: {
            componentParent: this
        }
    };
} 

Make sure when drawing grid in HTML

<ag-grid-angular #grid-reference [gridOptions]="gridOptions">

Then in your cellRenderer include agInit which will be fire when class is drawn.

public params;

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

    console.log(this.params.context.componentParent); 
    // access to parent functions / variables etc
}

So then for example after an event, if you had public hello: string in the parent you could do the following below.

this.params.context.componentParent.hello = "hi"; // could be function call.

This should then allow you to do as you need interacting between the two. The context is bound.

I hope this is what you are looking for.

Here is ag-grid's documentation.