Paging and Virtualization remote data feature

Hi

I have a query on Paging and Virtualization remote data feature.

I was going through below link-
http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

I have added pageable: true and pagesize:10 in this example like below-

$(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 10,
                        transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        }
                    },
                    height: 543,
                    pageable: true,
                    scrollable: {
                        virtual: true
                    },
                    sortable: true,
                    columns: [
                        { field: "OrderID", title: "Order ID", width: 110 },
                        { field: "CustomerID", title: "Customer ID", width: 130 },
                        { field: "ShipName", title: "Ship Name", width: 280 },
                        { field: "ShipAddress", title: "Ship Address" },
                        { field: "ShipCity", title: "Ship City", width: 160 },
                        { field: "ShipCountry", title: "Ship Country", width: 160 }
                    ]
                });
            });

Now grid loads all 830 rows of Orders and then displays first 10 rows. Can you please explain me how paging and virtualization functionality works here.

I am trying to achieve below scenario-
On first load of grid, it will fetch & show only first 10 rows from dataSource
When user clicks on next page then it should fetch next 10 rows and so on.
Is this scenario possible to achieve with your paging and virtualization features?

Cheers

Sanket