검도 UI 격자가 첫 번째 페이지 너머에 페이지를 표시하지 않습니다.

Question

페이지에서 사용자가 링크를 클릭하면 간단한 모달 팝업이 열립니다. 이 팝업 내에서 Kendo UI 그리드는 레코드 테이블을 표시합니다. 데이터는 ajax 호출을 통해 검색됩니다. 팝업에는 부동산이 거의 없으므로 페이지에 5 개의 레코드 만 표시하고 사용자는 검도 그리드의 페이징 기능을 사용하여 더 많은 레코드를 볼 수 있습니다. 또한 우리는 클라이언트 측에서 페이징을 구현하고 단일 아약스 호출에서 모든 레코드를 가져 오려고합니다.

Ajax 호출을 통해 다섯 개 이상의 레코드를 검색하더라도 Kendo UI Grid가 다섯 개의 레코드가있는 한 페이지를 보여주는 것을 제외하면 모든 것이 잘 작동합니다.

소스 코드

은 다음과 같습니다 :

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