angulartypescriptdevextremedevextreme-angular

DevExtreme button's event doesn't see fields of component


I have component with some fields, methods and button events for buttons. There is my component:

export class MyClass implements OnInit, AfterViewInit {
  @ViewChild(DxDataGridComponent, { static: true })
  dataGrid: DxDataGridComponent;
  myArr: Array<string>
  //some fields here...

  constructor(
    
  //some things
  ) {

    //some code in contructor
    }


   customFunc(e)
   {
     this.myArray=this.doSth(); <- err
   }

And there is my grid-view (I use devExtreme):

<div class="card">
  <div class="card-body">
    <dx-data-grid
      id="feature-releases"
      [disabled]="isBusy"
      [dataSource]="gridDataSource"
      [showColumnLines]="true"
      [showRowLines]="true"
      [showBorders]="true"
      (onSelectionChanged) ="onSelectionChanged()"
      (onRowUpdating)="updateRow($event)"
      (onToolbarPreparing)="onToolbarPreparing($event)"
      [rowAlternationEnabled]="true">

      <dxo-selection
        mode="multiple"
        [allowSelectAll]="false"
        showCheckBoxesMode="always"
        >
      </dxo-selection>

      <dxo-editing mode="form" [allowUpdating]="true" [allowDeleting]="true" [useIcons]="true">
        <dxo-form onClick="customFunc($event)">
          <dxi-item itemType="group" caption="Info">
            <dxi-item dataField="position"></dxi-item>
            <dxi-item dataField="versionNumber"></dxi-item>
            <dxi-item dataField="name"></dxi-item>
            <dxi-item dataField="created"></dxi-item>
            <dxi-item dataField="updated"></dxi-item>
          </dxi-item>
          <dxi-item itemType="group" caption="Data">
            <dxi-item dataField="description"></dxi-item>
            <dxi-item dataField="notes" [label]="{ text: 'Update Message' }" editorType="dxTextArea" [editorOptions]="{ height: 170 }"></dxi-item>
          </dxi-item>
          <dxi-item caption="Editor">
              <app-feature-release-editor
                [selectedReleases] = "selectedReleases">
              </app-feature-release-editor>
            <app-feature-release-create (featureReleaseCreated)="onFeatureReleaseCreated($event)"></app-feature-release-create>
          </dxi-item>
    <dxi-column type="buttons">
        <dxi-button name="edit" [onClick] = "customFunc"></dxi-button>
        <!-- <dxi-button id="iD"  icon="trash"  [onClick]="remove"></dxi-button> -->
    </dxi-column>   
      </dxo-form>
      </dxo-editing>
   </div>
</div>

And then - after I click on edit button event is called properly, but i can't use any of fields from my component.Nothing is "visible" inside the funtion. I need to data from event (id, and some other) and pass it to the collection. How can i Do it? It's just only a part of my code, so syntax, or closing signs (like '<') can be wrong - but it's not point of my question.


Solution

  • You are probably in a different scope. You can bind the instance of your component to your customFunc function to access the class.

    Add the following to your constructor:

    constructor() {
        this.customFunc = this.customFunc.bind(this);
    }