剣道UIグリッドが最初のページを超えてページを表示しない

Question

ユーザーがリンクをクリックすると、単純なモーダルポップアップが開きます。このポップアップ内に、剣道のUIグリッドにレコードの表が表示されます。データは、ajax呼び出しによって取得されます。ポップアップには不動産がほとんどないため、ページに5つのレコードしか表示したくないため、ユーザーは剣道グリッドのページング機能を使用してさらにレコードを表示できます。また、クライアント側でページングを実装し、すべてのレコードを単一のAjax呼び出しで取得したいとします。

剣道UIグリッドは、5つ以上のレコードがajax呼び出しによって取得されても、5つのレコードで1ページを表示している点を除いて、すべて正常に動作しています。

ソースコードは以下の通りです：

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を供給し、（上記の私の質問を参照してください）かかりスキーマを指定して「作品」に剣道を求めていました。この場合、5つのpageSize = 5のレコードを持つ単一のページだけを示す剣道グリッドです。ワークセクションを別の変数に持ってきて、それをデータとして提供すると、問題が解決されました。問題を解決したコード（「データソース」のセクションを参照）：

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