Kendo-grid server paging not working

2 posts, 0 answers
  1. Ahamed Fazil Buhari
    Ahamed Fazil Buhari avatar
    1 posts
    Member since:
    Jul 2017

    Posted 28 Aug 2017 Link to this post

     

    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.

     

  2. Stefan
    Admin
    Stefan avatar
    3067 posts

    Posted 30 Aug 2017 Link to this post

    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.
Back to Top