angularag-grid-angularangular-grid

How to call a service from ag grid drag & drop event


I have an ag-grid set up with options to trigger drag and drop events:

this.gridOptions = {
      columnDefs: this.getColumnDefs(),
      rowDragManaged: true,
      onRowDragEnter: this.onRowDragEnter,
      onRowDragEnd: this.onRowDragEnd,
...

I also have a simple service

export class myService {
...
   public doSomething(): void {
        ...
   }
}

It seems I cannot call the doSomething service function from within the onRowDragEnd event - getting a cannot read property 'doSomething' of undefined... at Object.onRowDragEnd error.

I know the service is defined and working correctly, doSomething can be called from the grid component's init function, so I'm just not sure how I can call something external to the grid or any workaround ?


Solution

  • Arrow functions will execute in their lexical context regardless of the caller. Try this:

    this.gridOptions = {
          columnDefs: this.getColumnDefs(),
          rowDragManaged: true,
          onRowDragEnter: (event: RowDragEvent) => {
               this.onRowDragEnter(event);
          },
          onRowDragEnd: (event: RowDragEvent) => {
               this.onRowDragEnd(event);
          }
    ...
    

    Edit: I updated this answer so you can pass the params from the event to your handler.