jQuery UI Widgets Forums Vue(New) Changing Offset NOT working in jqxPopover

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 month ago.

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

  • samidjo
    Participant

    Dears,

    I copied the same example of Default Functionality.

    I then played with the code below:

            this.left = this.$refs.myHeroButton.$el.offsetLeft;
            this.top = this.$refs.myHeroButton.$el.offsetTop;

    Where left and right variables are used here:

        <JqxPopover ref="columnsSelectorPopup" :selector="'.my-button'" :showCloseButton="true" :title="'Choose columns'"
                    :showArrow="false" :arrowOffsetValue="50" :offset="{ left: left, top: top }">

    The left and right variable are not being updated. Could somebody help ?

    • This topic was modified 1 month ago by  samidjo.
    • This topic was modified 1 month ago by  samidjo.

    Hristo
    Participant

    Hello samidjo,

    You could use this functionality in another place not exactly with the process of clicking.
    Please, take a look at this code snippet:

    <template>
      <div>
        <JqxPopover
          ref="myPopover"
          :showCloseButton="true"
          :selector="'.my-button'"
          :title="'Employees'"
          :arrowOffsetValue="50"
          :offset="{ left: left, top: top }"
        >
          <div ref="employees"></div>
        </JqxPopover>
        <div
          style="height: 33px; border-width: 1px; border-style: solid; padding: 10px;"
          class="jqx-widget-header"
        >
          <JqxButton
            ref="myButton"
            style="float: right"
            class="my-button"
            @click="updatePopoverPosition()"
            :width="150"
            :height="22"
            :template="'inverse'"
          >View Employees</JqxButton>
        </div>
      </div>
    </template>
    <script>
    import JqxPopover from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpopover.vue";
    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
    export default {
      components: {
        JqxPopover,
        JqxButton
      },
      data: function() {
        return {
          left: 0,
          top: 0
        };
      },
      mounted: function() {
        let data = new Array();
        let firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne" ];
        let lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth" ];
        let titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative" ];
        for (let i = 0; i < firstNames.length; i++) {
          let row = {};
          row["firstname"] = firstNames[i];
          row["lastname"] = lastNames[i];
          row["title"] = titles[i];
          let imgurl = "../../../images/" + firstNames[i].toLowerCase() + ".png";
          let img = '<img height="50" width="45" src="' + imgurl + '"/>';
          let table =
            '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' +
            img +
            "</td><td>" +
            firstNames[i] +
            " " +
            lastNames[i] +
            "</td></tr><tr><td>" +
            titles[i] +
            "</td></tr></table>";
          this.$refs.employees.innerHTML += table;
        }
    
        let position = {
          left: -50,
          top: 0
        };
        this.$refs.myPopover.offset = position;
      }
    };
    </script>
    
    <style>
    </style>

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.