Virtual Scroll Paging

8 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 24 Apr 2012 Link to this post

    Is it possible to have virtual paging that automatically fetches the next page for when paging is enabled? This way the user doesn't have to worry about the actual paging?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 24 Apr 2012 Link to this post

    Hello Jonathan,

    Have you seen these demos?

    Local data virtualization

    Remote data virtualization

    If you envisage some different behavior, please clarify.

    Regards,
    Dimo
    the Telerik team
    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. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 24 Apr 2012 Link to this post

    I mean more like this; 

    http://demos.telerik.com/aspnet-mvc/grid/pageonscroll
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Apr 2012 Link to this post

    Hello Jonathan,

    I see. Well, the virtualization mechanism in the Kendo Grid is actually more advanced and better in terms of user experience, because the user always sees "more real" scrollbar and gets the idea how many items the Grid has. That's why we don't intend to introduce the implementation that is included in the MVC Grid.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jonathan
    Jonathan avatar
    57 posts
    Member since:
    Jun 2012

    Posted 25 Apr 2012 Link to this post

    What I need is the ability to do the virtual paging so that I can load 100 rows at a time as the user scrolls for large data sets. Is this possible?
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Apr 2012 Link to this post

    Hello Jonathan,

    You need to set the pageSize to the desired value. The demos I sent previously show how to do this.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Bob
    Bob avatar
    28 posts
    Member since:
    Jul 2009

    Posted 14 Feb 2014 in reply to Dimo Link to this post

    I am also trying to accomplish the same thing and I am not sure setting pageSize does what we both wanted.  I have set page size to 10 and I get the first 10 rows returned from my MVC controller.  The JSON returned from the controller indicates that there are 1000 total rows in the data set.  The scrollbar does not represent that as it always seems to be just the amount loaded into the Grid (10 rows)

    I would expect the scrollbar to represent the ratio of loaded rows to total rows (10 / 1000) = 1%  and I would also expect an automatic call to my controller to fetch the next 10 rows....this does not happen with these examples.  In these examples, all the data is returned with the first service call so the client has all the data in one shot.  I do not want to do that....

    How can true virtual scrolling on the server side be done ?

    Bob

    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                   url: "accounts/details/virtualload/10/0",
                   dataType: "json",
                   type: "POST"
                }
            },
            schema: {
                data: "data", // records are returned in the "data" field of the response
                total: "total" // total number of records is in the "total" field of the response
            },
            serverPaging: true // enable server paging
        },
        height: 230,
        scrollable: {
            virtual: true
        },
        sortable: true,
        columns: [
            { field: "Date", title: "Date", width: 60 },
            { field: "Description", title: "Description", width: 300},
            { field: "Amount", title:"Amount", width: 70 },
            { field: "Balance", title:"Balance", width: 70 }
        ]        
    });


  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Feb 2014 Link to this post

    Hi Bob,

    You can compare your Grid configuration with the one in our demo.

    http://demos.telerik.com/kendo-ui/web/grid/virtualization-remote-data.html

    For example, I don't see where you have set the pageSize in the DataSource configuration. So either the provided configuration is wrong, or it does not reflect your actual implementation.

    Please send a complete runnable demo if you need further assistance.

    Regards,
    Dimo
    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