Kendo UI 网格不显示第一页以外的页面

Question

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

一切正常，除了 Kendo UI 网格显示一页有五个记录，即使通过 ajax 调用检索了超过五个记录。

源代码如下：

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

我终于解决了这个问题。这可能是一个 kendo 错误。我的 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 通过指定模式来获取 "works"（请参阅我上面的问题）。在本例中 kendo 网格仅显示包含五个 (pageSize = 5) 条记录的单页。当我将工作部分分配给一个单独的变量并将其作为数据提供时，它解决了这个问题。解决问题的代码（检查 "dataSource" 部分）：

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

Kendo UI 网格不显示第一页以外的页面

Kendo UI grid not showing pages beyond the first page

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc