Kendo UI grid not showing pages beyond the first page

Question

On our page when the user clicks on a link a simple-modal popup opens up. Within this popup a Kendo UI grid displays a table of records. The data is retrieved via an ajax call. Since the popup has very little real estate we want to show only five records in a page and the user can use the paging feature of Kendo grid to view more records. Also we want to implement the paging on the client side and get all the records in a single ajax call.

Everything is working fine, except that Kendo UI Grid is showing one page with five records even though more than five records are retrieved through the ajax call.

The source code is below:

showReportPopup: function (dataId) {

    if (dataId.length > 0) {
        $.ajax({
            url: AppGlobal.rootPath() + "Report/Get?id=" + dataId,
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: "",
            success: function (data) {
                if (data.length === 0) {
                } else {

                    // Load data into DOM & Kendo UI Grid 
                    loadDataIntoReportPopup(data);

                    // Show simple modal popup
                    $("#report-summary-modal").modal({
                        maxWidth: 880,
                        maxHeight: AppGlobal.maxModalHeight(),
                        minWidth: 880,
                        minHeight: 250,
                        onShow: function (dialog) {
                            $("html,body").css("overflow", "hidden");
                        },
                        onClose: function (dialog) {
                            $("html,body").css("overflow", "auto");
                            $.modal.close();
                        },
                        overlayClose: false
                    });                            
                }
            },
            complete: function() {
            }
        });
    }
},

loadDataIntoReportPopup: function (reportData) {        

    // Populate various fields

    // Load the kendo ui grid section
    $("#viewWorksGrid").kendoGrid({
        dataSource:
        {
            data: reportData,
            schema: {
                data: "works"
            },
            pageSize: 5,
            serverPaging: false
        },
        pageable: true,
        scrollable: true,
        sortable: false,
        resizable: true,
        columnMenu: false,
        noRecords: {
            template: "No results available."
        },
        columns: [
            {
                field: "title",
                title: "Title"
            },
            {
                field: "composers",
                title: "Composers"
            },
            {
                field: "performances",
                title: "Performances",
                attributes: { style: "text-align:right;" },
                width: 50
            },
            {
                field: "duration",
                title: "Duration",
                attributes: { style: "text-align:right;" },
                width: 50
            }
        ]
    }).data("kendoGrid");
},

Answer 1

Finally, I was able to resolve the issue. It might be a kendo bug. My json response was structured like below:

{  
   "reportName":"The Moscow Mules",
   "reportCountry":"AUSTRALIA",
   "reportSuburb":"SYDNEY",
   "works":[  
      {  
         "workId":11309,
         "title":"my test 50",
         "composers":"Sheeran E / error CA w",
         "performances":1,
         "duration":"01:00"
      },
      {  
         "workId":1491,
         "title":"my test 55",
         "composers":"Hauge D",
         "performances":1,
         "duration":"02:02"
      },
      //...  more such objects
   ]
}

Previously, I was supplying the whole json as data and asking kendo to take "works" by specifying a schema (refer to my question above). In this case kendo grid showing only single page with five (pageSize = 5) records. When I got the works section to a separate variable and supplied it as data it resolved the issue. The code that solved the issue (check the "dataSource" section):

loadDataIntoReportPopup: function (reportData) {        

    // Populate various fields

    // Extract the "works" section to a new variable
    var works = reportData.works;

    // Load the kendo ui grid section
    $("#viewWorksGrid").kendoGrid({
        dataSource:
        {
            data: works,
            pageSize: 5,
            serverPaging: false
        },
        pageable: true,
        scrollable: true,
        sortable: false,
        resizable: true,
        columnMenu: false,
        noRecords: {
            template: "No results available."
        },
        columns: [
            {
                field: "title",
                title: "Title"
            },
            {
                field: "composers",
                title: "Composers"
            },
            {
                field: "performances",
                title: "Performances",
                attributes: { style: "text-align:right;" },
                width: 50
            },
            {
                field: "duration",
                title: "Duration",
                attributes: { style: "text-align:right;" },
                width: 50
            }
        ]
    });
},