I am trying to incorporate functionality that essentially clicks the “Apply” button when I hit the enter key. And then closes the webix modal and discards changes when I hit the escape button.
I want the same “onBeforeApply” code to run as if I’m clicking the “Apply” button with my mouse.
popup: { on: { onEnter: function (event) { this.onBeforeApply(); } } }
When I put it there I get a console error saying this.onBeforeApply is not a function. Regardless of what function I am putting there I get that same error - not a function. This popup object is part of my configuration, which I am then passing into webix.ui:
const configuration = this.getConfiguration(); const interface = <webix.ui.pivot>webix.ui(configuration);
public getConfiguration() => { const configuration = { view: 'pivot', container: this.elementRef.nativeElement, id: 'pivot', data: this.data, footer: this.footer, totalColumn: this.totalColumn, popup: { on: { onEnter: function (event) { this.onBeforeApply(); } } }, datatable: { // datatable items }, on: { onBeforeApply: structure => this.onBeforeApply(structure), } } return configuration; }
OnEnter within the popup is the only place I can seem to get the enter keypress event to fire.
How can I run onBeforeApply when I hit enter? And then close the modal/discard any changes when I hit escape?