jQuery UI Widgets Forums Chart Chrome Scroll Issue

Tagged: , ,

This topic contains 4 replies, has 3 voices, and was last updated by  Kamp 2 weeks, 4 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Chrome Scroll Issue #113536

    Kamp
    Participant

    Hi,
    I’m using jqxGrids with Vue. When using a grid with source

    source: {
      datatype: "json",
      url: "/api/",
      data: {
        name: this.queryName,
        operation: "read",
      },
      type: "POST",
      root: "records",
      datafields: [], // will be populated before mount
    },

    scrolling in Chrome and Edge Chromium gets out of sync.
    Meaning, when using selectionmode="multiplerows" or similar and you flick your mouse wheel a couple times the cursor and the highlighted row is off by 1 or 2 rows.
    When using source: {localdata:...} it works just fine.
    Also, this issue doesn’t seem to appear on Firefox or IE.
    Is this a known issue? What would be a possible fix?

    wfr

    Chrome Scroll Issue #113579

    Martin
    Participant

    Hello Kamp,

    We have not encountered such an issue.
    Is it possible that you provide us an example so we can observe what may cause it?
    Thank you!

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Chrome Scroll Issue #113596

    Kamp
    Participant

    Hello Martin, thanks for the reply.
    Unfortunately I do not have a publicly available database to query from.
    Do you happen to provide one with at read access only?

    Some additional information on how I set it up:
    I’m using Nuxt (which I know is not officially supported), however I’m forcing it to run on client side only which should make it run as if it was plain Vue.

    I basically set it up as follows:

    <template>
      <client-only>
        <span v-if="columns.length == 0" >Loading</span>
        <JqxGrid
         v-else
         :source="source"
         :columns="columns"
        />
      </client-only>
    </template>
    <script>
    let JqxGrid = null;
    if (process.client) {
      JqxGrid = require("jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue").default;
    }
    export default {
      components: {
        JqxGrid
      },
      data() {
        return {
          source: {...}
          columns: []
      }
    }
    </script>

    and in nuxt.config.js

    export default {
      css: [{ src: '@/assets/scss/main.scss', lang: 'scss' }],
      build: {
        transpile: ['jqwidgets-scripts']
      }
    }

    and main.scss

    @import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
    @import "jqwidgets-scripts/jqwidgets/styles/jqx.bootstrap.css";

    That’s about it.
    I do not use jqx.dataAdapter(source) to feed the source into JqxGrid as it’s used within vue_jqxgrid.vue anyway (could this be an issue?).
    columns gets filled within beforeMount() via an axios call, since I’m using the my grid component for a couple of different queries.

    wfr

    Chrome Scroll Issue #113597

    admin
    Keymaster

    I would suggest you to update to the latest version, which resolves scroll issue related to Chrome 86.

    Best regards,
    Peter Stoev

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

    Chrome Scroll Issue #113600

    Kamp
    Participant

    Hello Peter,
    I updated to 10.1.6 and that seems to have done the trick.
    Thank you very much!

    wfr

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

You must be logged in to reply to this topic.