jqxform cannot open window from button click event

[jqwidgetsdevParticipant]

Hi,

What is the way to open a window from a jqxForm button click event?

<template>
  <div>
    <JqxForm
      ref="myForm"
      style="width: 500px; height: auto"
      :template="template"
      :value="value"
    >
    </JqxForm>
        <JqxWindow
      ref="jqxWindowManageClients"
      :width="910"
      :height="590"
      :isModal="true"
      :autoOpen="false"
    >
      <div><span> Manage Clients </span></div>
      <div style="overflow: hidden">dfdfg</div>
    </JqxWindow>

  </div>
</template>
<script>
import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
import JqxWindow from "jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.vue";

export default {
  components: {
    JqxForm,
    JqxWindow,
    jqxButton
  }
  ,mounted() {
    const myForm = this.$refs.myForm;
    const btn = myForm.getComponentByName('btnManageClients');
    btn.on('click', function () {
      this.$refs.jqxWindowManageClients.open();
    });
  }
  ,data: function () {
    return {
      template: [
          {
          name: "btnManageClients",
          type: "button",
          text: "Manage clients",
          align: "left",
          padding: { left: 0, top: 5, bottom: 5, right: 40 },
        },
    ],
    };
  },
};
</script>

[svetoslav_borislavovParticipant]

Hi,

the function declaration does not keep the context.
To keep the context use arrow function declaration

btn.on(‘click’, () => {
this.$refs.jqxWindowManageClients.open();
});

https://codesandbox.io/s/damp-sky-l2zx2u?file=/src/App.vue

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Great Svetoslav, thanks.

[Author]

Posts