jQuery UI Widgets Forums Vue jqxform cannot open window from button click event

This topic contains 2 replies, has 2 voices, and was last updated by  jqwidgetsdev 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • jqwidgetsdev
    Participant

    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>
    

    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/


    jqwidgetsdev
    Participant

    Great Svetoslav, thanks.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.