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.

I know this is old, but the way I solve this is to use a service that's defined in the grid as well as the cell editor. The cell editor calls a method in the service, which emits an event that is received by the grid. For example I have a cell editor that can either accept input from the keyboard, or the user can select an item from the list. If the former, the item entered is looked up in the database. If the latter, I suppress the cell changed event using isCancelAfterEnd and emit an event to skip the lookup and use the item selected by the user. — Jon Vote

Dince12 Dince12 · Accepted Answer · 2019-05-02T19:05:34

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.

Emit Event from cellRendererFramework to parent

1 Answers