This is a migrated thread and some comments may be shown as answers.

Paging and Virtualization remote data feature

4 Answers 476 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sanket
Top achievements
Rank 1
Sanket asked on 19 Jan 2016, 04:41 PM

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

4 Answers, 1 is accepted

Sort by
0
Sanket
Top achievements
Rank 1
answered on 20 Jan 2016, 05:33 PM

In Addition to last reply, I followed below steps.

 

Step1: change your sample code like below
See Capture1

Step2: Run sample. Initial view shown as below
See Capture2

Step3: Use mouse scroll down to move on to page 2
See Capture3

Step4: User mouse scroll up to move onto page 1 again
See Capture4
 
Virtualization and paging not in sync with each others Can you please help me on this?

 

Cheers

Sanket

0
Alexander Popov
Telerik team
answered on 21 Jan 2016, 11:35 AM
Hello Sanket,

We recommend using either paging or virtual scrolling. Using both at the same time makes little sense and might exhibit some side effects.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sanket
Top achievements
Rank 1
answered on 22 Jan 2016, 04:18 AM

Hi Alexander

Lets say, I go with only Virtualization approach (without paging). Below is the sample HTML page code and WebApi

 

HTML page-

<div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        //type: "odata",
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 5,
                        transport: {
                            read: "api/Audit"
                        }
                    },
                    height: 643,
                    //pageable: true,
                    scrollable: {
                        virtual: false
                    },
                    sortable: true,
                    dataBound: function(e) {
                        console.log("dataBound");
                    },

                    columns: [
                                    { field: "AUDIT_ID", title: "AUDIT_ID" },
                                    { field: "AUDIT_TYPE", title: "AUDIT_TYPE" },
                    ]
                });
            });
        </script>
        <style>
            /*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/
            #grid table {
                min-width: 1190px;
            }
        </style>
    </div>

WebAPI Get method – Case 1

public IQueryable<AUDIT> GetAUDIT()
        {
            return db.AUDIT;
        }


WebAPI Get method – Case 2

public IQueryable<AUDIT> GetAUDIT(int take, int skip, int page, int pageSize)
        {
            return db.AUDIT.Take(take * page).OrderBy(x => x.AUDIT_ID).Skip(skip);
        }

 

In Both cases, I see all records at one time, What I want to achieve here is, show 10 records first. When scrolls further, I would like to fetch next 10 records and so on...

Could you please help me out this scenario?

 

Please note- I am only using HTML5 KendoUI with WebApi. We not want to involve Kendo MVC UI or its extensions.

 

Cheers

Sanket

 

 

0
Alexander Popov
Telerik team
answered on 25 Jan 2016, 01:38 PM
Hi,

I would recommend checking the following links:

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Sanket
Top achievements
Rank 1
Answers by
Sanket
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or