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

Kendo-grid server paging not working

1 Answer 969 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ahamed Fazil Buhari
Top achievements
Rank 1
Ahamed Fazil Buhari asked on 28 Aug 2017, 01:58 PM

 

Hello everyone,

I am trying to have a Server Paging for Kendo UI Grid. Here I am retrieving data from SharePoint, I am not getting any error and also grid is updated with data. But my paging shows 0 always and I do not have option to navigate. If i remove serverPaging: true then I can see all the data in the grid

<div kendo-grid="myGrid" options="mainGridOptions" class="k-alt ms-font-xs">
</div>

 

Here I provided the options for the grid.

01.$scope.mainGridOptions = {             
02.    dataSource: {                  
03.        type: "odata",
04.        transport: {
05.            parameterMap: function(data, type) {
06.                return kendo.data.transports["odata"].parameterMap.apply(this, arguments);
07.            },
08.            read: {
09.                dataType: "json",
10.                headers: {
11.                    "accept": "application/json; odata=verbose"
12.                },
13.                url: spSiteUrl
14.            }                       
15.        },                   
16.        serverPaging: true,                  
17.        schema: {                      
18.            total: "total"
19.        },
20.        pageSize: 10,                   
21.        serverSorting: true                                                
22.    },                         
23.    dataBound: function() {
24.        this.expandRow(this.tbody.find("tr.k-master-row").first());
25. 
26.        var data = this.dataSource.view();
27.        for (var i = 0; i < data.length; i++) {
28.            var uid = data[i].uid;
29.            var row = this.table.find("tr[data-uid='" + uid + "']");
30. 
31.            row.find(".k-grid-ViewDetails").contents().last()[0].textContent = data[i].Description;
32.        }
33.        $(".k-grid-ViewDetails").removeClass("k-button");
34.        $(".k-grid-ViewDetails").addClass("ms-font-m-plus ms-fontWeight-semibold align-right");
35.    },                                        
36.    sortable: true,
37.    pageable: true
38.    columns: [ .. ...
39.    ]
40.};

 

Please let me know what i am missing here to get the server pagination.

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 30 Aug 2017, 06:38 AM
Hello Ahamed,

The described behaviour can occur if the response from the server does not return the total property in the correct format.

I can suggest inspecting the network tab to observe the response received from the server when the serverPaging is used. If possible please share with us the received response, so we can inspect what may be causing the issue.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ahamed Fazil Buhari
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or