I am not able to call a method out of scope

Question

I have a column that has a button that calls a method when it gets clicked on. So that click gives me the rows object and I pull the property I need to call another method. I can not call reloadDialog it is in my component. This is in a column in DxGrid.

<dxi-column type="buttons" caption="Button"
  [width] = 150 alignment="left"
  [allowExporting]="false">
  <dxi-button
      text="Detail"
      [visible]="true"
      [onClick]="buttonClickDetails">
  </dxi-button>
</dxi-column>

This buttonClickDetails and reloadDiaload are in the same component

public buttonClickDetails(e: any) {
  console.log('inside button click details');
  const id = e.row.data.AgreementId;
  console.log('Leaving the buttonClickDetails');
  // I get an error that says reloadDialog is not a funtion.
  this.reloadDialog(id, 'Agreement');
}

Answer 1

Make sure you have applied all instructions given by the docs. In their example they show you that you need to bind the context yourself like this:

@Component(...)
export class MyComponent {

    constructor() {
        // binding 'this' will pass it as the context of that function.
        this.buttonClickDetails = this.buttonClickDetails.bind(this);
    }

    public buttonClickDetails(e: any) {
        console.log('inside button click details');
        const id = e.row.data.AgreementId;
        console.log('Leaving the buttonClickDetails');
        this.reloadDialog(id, 'Agreement');
    }
}

Docs where I got it from: Command Column Customization


I think it's really odd they didn't provide the 'normal' Angular output event method like: (click)="buttonClickDetails($event)". That wouldn't have needed the additional bind instruction, but I suppose it is what it is.