Scoping issues while using context menu

Question

I'm following the docs here to add a context menu item to my grid. The issue is that from the scope of getContextMenuItems (in the example), I'm unable to access any other methods or variables in my component. Is this possible? Example below:

private varIWantToAccess: boolean = false;

function getContextMenuItems(params) {
    var result = [
    { // custom item
        name: 'Alert ' + params.value,
        action: function () 
    {
        window.alert('Alerting about ' + params.value);
        this.varIWantToAccess = true; // Builds fine, but throws a run time exception, since this "this" context is different than the one that has "varIWantToAccess"
    }
    },
        ....
        return result;
}

Thanks!

This is not related to ag-grid actually. Similar issue: [Angular 5/4/2 method passed as reference is not in scope](https://stackoverflow.com/questions/48557364/1417185) — Paritosh, Mar 09 '18 at 16:21
Possible duplicate of [Angular 5/4/2 method passed as reference is not in scope](https://stackoverflow.com/questions/48557364/angular-5-4-2-method-passed-as-reference-is-not-in-scope) — Paritosh, Mar 09 '18 at 16:22

score 8 · Answer 1 · answered Jul 28 '17 at 13:13

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.

score 5 · Accepted Answer · answered Apr 27 '17 at 12:59

I assume that you are speaking of an Angular 2 or 4 component using TypeScript. If so then use fat arrow to connect to your function.

Example:

gridOptions.getContextMenuItems = () => this.getContextMenuItems();

This should provide you the scope you need.

score 2 · Answer 3 · edited May 06 '20 at 07:40

You need to provide parent context property to the item. Sample context menu item:

{
    name: 'BreakoutReport',
    action: function () {
        this.context.isDrillDownData = false;
        this.context.isBreakOutReport = true;
        this.context.populateBreakOutGrid();
    },
    cssClasses: ['redFont', 'bold'],
    disabled: !params.value.drillDownReport,
    context: params.context
}

Here, this.context has access to all the parent functions. Remember, this context needs to be set in grid options first and then can be transferred to context menu items.

1st step: set context in gridOptions

 getGridOption() {
     return {
         getContextMenuItems: this.getContextMenu,
         context: this//pass parent context
     };
 }

2nd step: pass context to context menu subitems

  getContextMenu(params) {
    const result = [
         {
            name: 'Drilldown Report',
            action: function () {
                this.context.populateDrillDownReport();//access parent context using this.context inside the function.
            },
            cssClasses: ['redFont', 'bold'],
            disabled: !params.value.drillDownReport,
            context: params.context//pass parent context
        },
        'separator',
        'copy',
        'copyWithHeaders'];
    return result;
}

score 1 · Answer 4 · answered Jun 29 '21 at 08:36

you can just amend your getContextMenuItems

getContextMenuItems = (params) => {
    var result = [
      {
        name: 'Activate ' + params.value,
        action: function () {
          window.alert('Activated Successfully ');
        },
        cssClasses: ['redFont', 'bold'],
      },
      {
        name: 'Details',
        action: () => {
          this.router.navigate(['container-authorization/listing/distributor-container-store/details']);
        },
        cssClasses: ['redFont', 'bold']
      },
}

method to fat arrow method like below.

Scoping issues while using context menu

4 Answers4

Linked