Kendo UI 网格不显示超出第一页的页面

Question

在我们的页面上，当用户单击链接时，会打开一个简单的模式弹出窗口。在此弹出窗口中，Kendo UI 网格显示了一个记录表。通过 ajax 调用检索数据。由于弹出窗口的空间很小，我们希望在一个页面中只显示 5 条记录，并且用户可以使用 Kendo 网格的分页功能来查看更多记录。我们还想在客户端实现分页，并在一次 ajax 调用中获取所有记录。

一切正常，除了 Kendo UI Grid 显示一页有 5 条记录，即使通过 ajax 调用检索到超过 5 条记录。

源码如下：

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

最后，我能够解决这个问题。这可能是一个剑道错误。我的 json 响应的结构如下：

{  
   "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
   ]
}

以前，我将整个 json 作为数据提供，并要求 kendo 通过指定模式来获取“作品”（请参阅​​我上面的问题）。在这种情况下，剑道网格仅显示具有五个 (pageSize = 5) 记录的单页。当我将works部分放入一个单独的变量并将其作为数据提供时，它解决了这个问题。解决问题的代码（检查“数据源”部分）：

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
            }
        ]
    });
},