Endless scrolling not working for me

14 posts, 0 answers
  1. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 19 May 2014 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 20 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 20 May 2014 Link to this post

    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
  5. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 20 May 2014 Link to this post

    Here is the new URL to check:

    http://jsbin.com/xiposato/8/edit
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 21 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 21 May 2014 Link to this post

    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
  8. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 21 May 2014 Link to this post

    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.
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 22 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 22 May 2014 Link to this post

    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
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 23 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 23 May 2014 Link to this post

    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

  13. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 26 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 27 May 2014 Link to this post

    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.
  15. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready