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

Query on Grid Paging

5 Answers 344 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sanket
Top achievements
Rank 1
Sanket asked on 20 Jan 2016, 05:40 PM

Hi

I am trying Grid paging feature with WebAPI and Below is my code sample-

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 Case 1,
I am receiving all the records irrespective of page size.
Every time, I click on next page, it fetches all records again and shows records from row number 1.

 

In Case 2,
I am able to show only one page size records and it always remains as Page1. I couldn't see multiple pages
These are my requests
http://localhost:49736/api/Audit?take=5&skip=0&page=1&pageSize=5
http://localhost:49736/api/Audit?take=5&skip=5&page=2&pageSize=5

 

Could you please help me on this?

 

Cheers

Sanket

 

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 22 Jan 2016, 11:56 AM
Hi Sanket,

For "Case 1", if you pass all the data you should set serverPaging to false and allow the dataSource to handle the paging on the client.

As for "Case 2", can you please ensure that you return the correct items within the GetAUDIT function? You could also try to use the following line instead:
return db.AUDIT.OrderBy(x => x.AUDIT_ID).Skip(skip).Take(take);

Hope this helps.
 

Regards,
Konstantin Dikov
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 25 Jan 2016, 04:05 AM

For Case 1, setting server paging to false does work for me.

In Case2, as you mentioned I tried changing to this
 return db.AUDIT.Take(take * page).OrderBy(x => x.AUDIT_ID).Skip(skip);
but at first instance i get 5 records. If i use scroll then there no subsequent request.

I also tried to increase pageSize from 5 to 50 records. in this case too for first request i get 50 records but there is no further request received by my webAPI. (I have make sure that I am using scrollable: { virtual: false }, and serverPaging: true,)



Do you have any example where Paging and remoate data virtualization is used?

 

Cheers

Sanket

0
Konstantin Dikov
Telerik team
answered on 26 Jan 2016, 01:26 PM
Hi Sanket,

You could take a look at the following online demo with enabled server paging, filtering and sorting:
If the issue persists, please open regular support ticket and attach a sample, runnable project that replicates the issue. Thus we will be able to easily determine what is causing the problem with your current implementation.


Best Regards,
Konstantin Dikov
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 26 Jan 2016, 01:48 PM

Hi Konstantin,

Thanks for reply.

You can reproduce issue at your end simply by modified this example

http://demos.telerik.com/kendo-ui/grid/remote-data-binding

Just add scrollable: { virtual: true},

Let me know your thoughts on this.

 

Cheers

Sanket

 

0
Konstantin Dikov
Telerik team
answered on 28 Jan 2016, 12:06 PM
Hello Sanket,

The virtual scrolling works correctly in the example that you are referring to and this could be tested in the following dojo example:

Regards,
Konstantin Dikov
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
Konstantin Dikov
Telerik team
Sanket
Top achievements
Rank 1
Share this question
or