Endless scrolling not working for me

[Sergio]

Hi,

I'm new to Kendo UI and also to mobile development, and right now I'm having trouble to make endless scrolling to work on my Kendo UI mobile project.

Please take a look at my code in: http://jsbin.com/xiposato/6/edit

Basically I'm getting data from a webserver using a simple JSON file. But endless scrolling doesn't work with it, no matter what I do. I tried many examples on the website and searched on the forums but didn't find any clues.

Can anyone help?

Thanks

[Kiril Nikolov]

Hello Sergio,

In your example the url property -  url: URL + "/data.json", is not set, so I was not able to access your remote service and see what data is returned, can you please provide a runnable sample that we can investigate?

Regards,
Kiril Nikolov
Telerik

 

 

[Sergio]

Hi

I've updated the code with a sample json from my server, although I don't see it working on jsbin. On my end is working fine, the data is shown on the app, but the endless scroll problem persists.

Thank you

[Sergio]

Here is the new URL to check:

http://jsbin.com/xiposato/8/edit

[Kiril Nikolov]

Hello Sergio,

I am not able to access the url due to the as I get the following error:

XMLHttpRequest cannot load http://www.virgahost.com/data10.json. No 'Access-Control-Allow-Origin' header is present on the requested resource.

However if you serve your data as a local json file, then maybe the local data virtualization is a better approach, as shown in this example:

http://jsbin.com/jayit/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Sergio]

Hi Kiril,

I don't know exactly what is happening with JSON, but probally jsbin is not accepting an external data source... Anyway, my question is about the endless scroll feature, which is not working on my project.

Can you save my json on your side and take a look? Because I don't know how to fix this jsbin issue and my project is working fine except for this endless scroll issue.

And local data is not an option because I need to get an updated list of data each time. This json data will be updated often from a web app, so the app users can see the updated list.

Thanks

[Sergio]

Also, I run some tests:

I copied your code from pastebin and saved on my project. Basically, using the local data with virtualViewSize and endlessScroll but it is not working still.

The demo on the website is working, although it's using another type of data. Maybe is there a bug with JSON data? I tried all types of methods to achieve this result and none seems to work.

Please test on your end with my JSON sample. You can use your code, I just want to see endlessScroll working.

[Kiril Nikolov]

Hello Sergio,

I have tested the jsBin that I provided and it works correctly on my end. Can you please extract a fully runnable sample of the code that you have with the remote service, so we can investigate the matter and assist you further? Please understand that without the full picture it is really hard for us to tell you what exactly is wrong in your project. 

If you do not know how to extract a runnable sample, maybe this blog post will help:

http://www.kendoui.com/blogs/teamblog/posts/13-09-24/how-to-get-the-most-out-of-your-kendo-ui-support.aspx

Looking forward to your reply.

Regards,
Kiril Nikolov
Telerik

 

 

[Sergio]

Hi Kiril,

I understand your point, and truly believe that the customer needs to provide all the details in order to obtain an efficient support.

BUT, I'm having trouble to provide a JSON data that works cross-platform and because of that you are not helping me, even though you can do this tests on 

your own (maybe hosting my json file acessible via web browser and uploading it somewhere). It's not something time consuming or difficult for you to do, 

but you prefer to let it pass every day.

Anyway, I'm really sure this is not working correctly just by simply observating how the demos work. Let me examplify this:

First, let's try the endless scroll demo avaiable on website, which loads on Telerik Dojo:
http://trykendoui.telerik.com/eBOD

Now, if you scroll down, you will see that near the bottom, the scroll bar will go up, indicating that more items have been loaded. If I past this data 

link (http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products) on my project, IT WORKS FINE TOO.

Now, let's paste your sample code (which you said is working perfectly) on the DOJO:

http://trykendoui.telerik.com/AMes

DOES NOT WORK. Well, at least, doesn't have the same behaviour of the working demo I pasted above. Please note I tried adding different data on the JSON 

(more records, different data) and the problem persists.

Now, how come this is working for you? I've tested your code on pastebin and telerik dojo and doesn't work as expected. It's just simple copy/paste of 

your "working" code.

Doing the same thing with the code avaiable on the demo works on telerik dojo and pastebin as well.

Kendo UI Endless Scroll Demo on Pastebin: http://jsbin.com/kororupe/1/edit

Kendo UI is great, very easy to use but on the other hand it is very expensive. Since I'm beggining with mobile apps development, I'm trying Kendo UI 

because I can have support from the developers. But so far, I'm not having a good experience.

I hope you understand that I'm not asking support to make my json work cross platform, but more to see endless scroll feature working, no matter if its 

locally or remotely. I already provided many examples for you to understand that it is not working with my JSON data.

Kindly, verify why endless scroll is not working. It really doesn't matter if you load it locally or remotely (although would be better if you could test 

yourself with a remote json file).

Ps: I got some sample JSON files generated by third-party websites for developers and DOES NOT work for me as well (reading remotely and locally).

Sergio

[Kiril Nikolov]

Hi Sergio,

As per your request I hosted the JSON file on my local IIS server and created a Kendo UI Mobile ListView using this data (again hosted on my IIS). The project is attached in this response (you need to edit the path to the JSON file). Here is a video showing the ListView in action:

http://www.screencast.com/t/PNpWvNnx2LtR

Regards,
Kiril Nikolov
Telerik

 

 

[Sergio]

Hello Kiril,

Looking at your screencast, doesn't look like the expected behaviour of the endless scrolling. On the Kendo UI documentation it's said that the new data will be loaded a little bit after half of the data has been shown. On your demo, I see the scrollbar reaching the bottom of the document and doesn't seem to load anything new.

Please compare the working demo on the website:

http://www.screencast.com/t/ym91gVJGOc

With this screencast of my data and endless scroll:

http://www.screencast.com/t/YNbBlWiJTw

Please look at how the scroll bar goes while in scrolling down the page.

As you can see, virtualViewSize is set to 30, but Kendo shows all the data (more than 30 records) and the scrollbar is already adjusted to show all this content at once (no endless scroll).

I already tested this with different data, using remote and local data and none seems to work with my JSON data.

I think this is enough to show you that indeed this is not working as expected, or maybe I'm doing something terribly wrong even though I'm following the website tutorials.

Sergio

[Kiril Nikolov]

Hello Sergio,

In the example of the screencast I am using local data virtualization as I do not have access to the remote service serving the data, in this scenario the scrollbar is not resized, because the widget know the total of the elements and can correctly size before loading them.

It looks like all data is shown, but this is not the case, as you can inspect the view size of the dataSource as shown here:

http://www.screencast.com/t/79NoZb7cV0

As you can see from the video, the virtual view size is set to 100, while the total number of items loaded in the DOM is 51, and these elements will change when the user scrolls down.

Regards,
Kiril Nikolov
Telerik

 

 

[Sergio]

Hi Kiril

What is the solution? I don't see endless scrolling working on either cases. I would like to know how to make my JSON file to work with endless scrolling.

[Kiril Nikolov]

Hi Sergio,

The solution is to use the local data virtualization as I showed with an example in my previous replies. 

Regards,
Kiril Nikolov
Telerik