How to change private class variable by onChange event in Aurelia?

Question

I want to listen to onChange event in a "odata-table" which is part of the aurelia-slickgrid library(https://github.com/ghiscoding/aurelia-slickgrid), take the value from that event and pass it to a variable in the class. Here is part the class in Typescript:

private selectedPeriod;

public onCellChanged(e) {
   this.selectedPeriod = e.target.defaultValue
}

And here is the html:

<div>
 <odata-table
            if.bind="businessUnit"
            update.bind="creditsTableUpdate"
            id-property-name="Id"
            onchange.bind="onCellChanged"
            column-definitions.bind="creditsColumnDefinition">
        </odata-tabled>
    </div>

There is the onChange.bind passing the onCellChanged. And when I do a console log selectedPeriod somewhere else in the code, it gives this error:

undefined

Answer 1

It seems that you might be using the wrong event name and also the wrong way to watch events. Events are not bindable, you need to use delegate with Aurelia.

You can see all the built-in SlickGrid grid event names at this link, Grid events and by looking at the list, the event name you should be using is onCellChange and must be written as kebab-case in Aurelia, so the final event name that you should be using is on-cell-change.delegate

Here's a full demo of this (refer to Aurelia-Slickgrid Event Wiki)

  <aurelia-slickgrid 
    grid-id="gridId" 
    column-definitions.bind="columnDefs" 
    grid-options.bind="gridOptions" 
    dataset.bind="myDataset"
    on-cell-change.delegate="onCellChanged($event.detail.eventData, $event.detail.args)">
  </aurelia-slickgrid>