Unable to execute function in Context Menu

Question

I'm trying to call a function in my context menu.

getContextMenuItems(params) {
    console.log(params.node.data)
    var result = [

      {
        name: "Delete",
        action : function () { 
         this.deletePriceFactor(params.node.data);
        }
        ,
        cssClasses: ["redFont", "bold"]
      },
      {
        name: "Audit"
      }

    ]
      return result;
    }

 deletePriceFactor = (rowdata)  =>{
    this.priceFactorService.deleteEntry(rowdata.exchangeCode, rowdata.productCode, rowdata.secType).subscribe(pricefactors => {
    });

  }

I keep getting an error: ERROR TypeError: this.deletePriceFactor is not a function at Object.action (price-factor.component.ts:162)

I have tried using arrow functions like this:

action : () =>  { 
         this.deletePriceFactor(params.node.data);
        }

The above results in another error: core.js:1673 ERROR TypeError: Cannot read property 'deletePriceFactor' of undefined

var result is a list of objects. Action is a key in that obect that calls my function — MarkJ, Jul 01 '19 at 16:01
In the first version it won't work, ` function() {}` change the context of this — bubbles, Jul 01 '19 at 16:06
can you add a jsfiddle ou stackblitz code ? i'll simple to test — bubbles, Jul 01 '19 at 16:17
try to modify the signature `deletePriceFactor` to `deletePriceFactor(rowdata) {}` — bubbles, Jul 01 '19 at 16:21
that gives me core.js:1673 ERROR TypeError: Cannot read property 'deletePriceFactor' of undefined — MarkJ, Jul 01 '19 at 17:03

score 10 · Accepted Answer · answered Jul 01 '19 at 18:45

10

if your html is like:

<ag-grid-angular
      [getContextMenuItems]="getContextMenuItems"
      .
      .
      .
    ></ag-grid-angular>

then the function getContextMenuItems must be writen like :

getContextMenuItems = (params) => {
}

Hence, the this keyword points to your component.

After that, call your method like:

action : () => this.deletePriceFactor(params.node.data)

answered Jul 01 '19 at 18:45

bubbles

2,597
1
15
40

2

This is a great insight. Thanks. – muasif80 Apr 30 '20 at 13:08
1

Super explaination of "this" keyword, I was having the same problem. thanks – MindRoasterMir Jun 28 '21 at 10:50

score 2 · Answer 2 · answered Apr 23 '20 at 10:57

You can add the reference to this in grid's context -

this.gridOptions.context = {
                    thisComponent : this
                };

And then, thisComponent can be access as below -

private getContextMenuItems(params) { 
    console.log(params);
    var result = [
        { // custom item
            name: 'Sample',
            action: function () { params.context.thisComponent.callMe(); },
            icon: '<i class="fa fa-pencil" />'
        }];
    return result;
}

Same can be done for any other call backs like cellRenderer.

reference: Scoping issues while using context menu

Its worked for me

why do you think icon is not displaying ? thanks – MindRoasterMir Jun 28 '21 at 10:55 — MindRoasterMir, Jun 28 '21 at 10:55

Unable to execute function in Context Menu

2 Answers2

Linked