jqxGrid scroll errors

A number of my app users have contacted me about errors showing up when scrolling using jqxGrid from both Android and Apple devices.
I made a simple test app using a button and a jqxGrid to show the error. If i put my finger on the vertical scrollbar then slide it down, then release finger, then drag it back up the page, i always get this error almost every time:
“jqxscrollbar.js
Uncaught TypeError: Cannot read property ‘originalEvent’ of undefined. line 8 column 7109”
Grabbing, sliding and releasing the scrollbars seems to cause it.

I made a simple program to show this - contains a single button (Button1) and the jqxGrid (Grid1). I used this code:

Button1.onclick = function() 
{
     gedata = [];
     
     //get grid data
     for     (i = (0); i  <= 100; i ++) 
     {
          row = [];
          for     (j = (0); j  <= 10; j ++) 
          {
               row["col" + j] = i;  
          } 
          gedata[i] = row;   
     } 
     
     //get data field array and columns to display
     datafieldsArray = [];
     columnsArray = [];
     gridcolsindex = 0;
     for     (k = (0); k  <= 10; k ++)
     {
            datafieldsArray[gridcolsindex] = {name: "col" + k , type: "text"};
            columnsArray[gridcolsindex] = {text: "Col" + k, datafield: "col" + k, cellsalign: 'center', align: 'center', width: "10%"};
            gridcolsindex = gridcolsindex + 1;   
     }   
     
     var source = 
     {
         localdata: gedata,
         datafields: datafieldsArray,
         datatype: "array"
     };
      
     var adapter = new $.jqx.dataAdapter(source);
     $("#Grid1").jqxGrid({
        //width: 800,
        theme: 'energyblue',
        //columnsheight: 25, 
        rowsheight: 30, 
        source: adapter,
        sortable: True,
        //selectionmode: 'singlecell',
        columns: columnsArray
     });
      
}

Really appreciate any help.
Thanks

This might be a question to ask on the jqWidgets forum:
https://www.jqwidgets.com/community/

Tip: If you’re pasting code, html or config files, surround it by triple back ticks (```) and it will be fomattted properly.

I put it on the jqWidgets forum so i’m waiting to see what they have to say.

I just tried downloading the latest version from jqWidgets to see if that solves the issue. With the older version i used (9.1.4) , i just added the jqwidgets folder to the my project and their controls ran fine.

image

However, with the latest version (10.0.2), i added the same folder
image

but i always get this error when i try run a simplified app with the grid.
image

Are there other files i need to add from jqWidgets?

Thanks

Dig into this one a bit more. Does the new jqWidgets folder have the same structure and contents as the old one?

Are there any other messages on the Chrome Console?

The structure of the two versions is similar.

image

except V10 has an extra file called jqximport,
and inside the styles folder, V10 has three extra files: jqx.light-ie, jqx.dark-ie, jqx.blue and a folder called font.

Chrome messages:
image
image

Not sure what to try next.
Thanks

Hopefully you get an answer from jqWidgets.

jqWidgets said they couldn’t reproduce the error.
I tried on various Android versions and Apple and the error appeared every time. Might have to send them an apk to install.

Also, just realised that if i run the below code in Chrome on my PC and on different Android devices, the results are different.
With Chrome, results look as expected.
With Android device running Android 8.1.0 (and newer versions i’ve tried), the row with all 100’s has less height than the others (cut off).

Button1.onclick = function() 
{
     gedata = [];
     
     //get grid data
     for     (i = (0); i  <= 100; i ++) 
     {
          row = [];
          for     (j = (0); j  <= 10; j ++) 
          {
               row["col" + j] = i;  
          } 
          gedata[i] = row;   
     } 
     
     //get data field array and columns to display
     datafieldsArray = [];
     columnsArray = [];
     gridcolsindex = 0;
     for     (k = (0); k  <= 10; k ++)
     {
            datafieldsArray[gridcolsindex] = {name: "col" + k , type: "text"};
            columnsArray[gridcolsindex] = {text: "Col" + k, datafield: "col" + k, cellsalign: 'center', align: 'center', width: "10%"};
            gridcolsindex = gridcolsindex + 1;   
     }   
     
     var source = 
     {
         localdata: gedata,
         datafields: datafieldsArray,
         datatype: "array"
     };
      
     var adapter = new $.jqx.dataAdapter(source);
     $("#Grid1").jqxGrid({
        //width: 800,
        theme: 'energyblue',
        //columnsheight: 25, 
        rowsheight: 30, 
        source: adapter,
        sortable: True,
        //selectionmode: 'singlecell',
        columns: columnsArray
     });
      
}

image

Could it be an Appstudio issue?

UPDATE: The GridDynamic sample also throws the error i originally mentioned occasionally when pressing/sliding/lifting finger off the scrollbars.

If it works differently on Chrome Desktop and Android, it might be a jqWidgets problem.

You’re saying the Chrome Desktop is fine?

What about running on Android as a web app?

Yes, Chrome Desktop works fine.

Running on Android as a web app throws the error also.
You’ll also see the error if you run the sample GridDynamic on a device and play around with the scrollbars.
The fact that jqWidgets cannot reproduce this leaves me stumped on what to do next.

Did they test it on an Android device?

They said they tested it on a iphone x, iphone 11 pro, galaxy s10 and galaxy note 10 and couldn’t reproduce it.
It would be really useful if someone else could run it on their own device to check.

Thanks

Hi George,

jQWidgets can’t reproduce any of these problems and i’ve tried a number of their online examples and i get scroll errors on all of them when running on device - running from my server or as an apk. It sounds like they are leaning towards issues with with NSBasic.
Can you please try the jqxGrid sample on your device and see the result?
I’ve been stuck on this for over a week and was supposed to submit an update on the app stores last week.

Thanks

What’s the URL of the app? I’ll try loading it on an Android device here.

Here’s what I get on my Android device. The last line does appear to be truncated. Did you give this same URL to jqWidgets to try?

I did give the same URL to jqWidgets, and i’m waiting to hear back on this one. The last line is truncated but that is not the issue.
The issue is with the scrollbars, particularly the horizontal bar. If you press, release it, slide etc. eventually you’ll probably see an error.

jqxscrollbar.js
Uncaught TypeError: Cannot read property ‘originalEvent’ of undefined. line 8 column 7109

Thanks