Virtual Scroll Paging

[Jonathan]

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?

[Dimo]

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

[Jonathan]

I mean more like this; 

http://demos.telerik.com/aspnet-mvc/grid/pageonscroll

[Dimo]

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

[Jonathan]

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?

[Dimo]

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

[Bob]

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 }
    ]        
});

[Dimo]

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