KendoUI Grid 서버 페이지 매김

Question

KendoUI Grid를 사용하여 KnockoutJS MVVM 사용 응용 프로그램에 내 데이터를 표시하고 있습니다. MVVM은 클라이언트 측 아키텍처이므로, knockoutjs observerble 배열을 유지하고 서버에서 해당 배열에 데이터를로드합니다.

self.loadForGrid = function() { 
    $.ajax({ 
     url: "api/matchingservicewebapi/GetAllMatchItemForClient/1", 
     type: 'GET', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
      $.each(data, function (i, obj) { 
       self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id })); 

      }); 
      window.alert('User(s) loaded successfully'); 
     }, 
     statusCode: { 
      401: function (jqXHR, textStatus, errorThrown) { 
       alert('Error loading users2'); 
      } 
     } 
    }); 
}; 

이 작동합니다. 하지만 내 표식에 대한 페이지 매김을 구현하고 싶습니다. 이렇게 클라이언트 쪽에서 할 수 있습니다. 이것은 내 viewmodel 코드입니다.

self.items = ko.observableArray([]); 

ko.bindingHandlers.kendoGrid.options = { 
    groupable: true, 
    scrollable: true, 
    sortable: true, 
    pageable: { 
     pageSizes: [5, 10, 15] 
    } 
}; 

그리고 이것은 나의 HTML 파일에 바인딩이다 (필자는 Knockout-Kendo.js를 사용했다).

<div data-bind="kendoGrid: items"> </div> 

하지만 원하는 것은 서버의 페이지 매김을 활성화하는 것입니다. 다시 말하면 다음 페이지로 갈 때 (2 페이지로 갈 때) 데이터가 다시로드되어 (2 페이지의 데이터를 말하도록 함) knockoutjs 관측 가능한 배열에 놓기를 원합니다. 어떻게해야합니까?

미리 감사드립니다.

Answer 1

kendoGrid를 항목에 바인딩하는 대신 kendo.data.DataSource에 바인드하고 전송을 지정해야합니다.

참조 : 예를 들어 http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

:

페이징 및 부하 방법에 "성공"에 대한 매개 변수를 추가합니다. 이는 DataSource의 read 메소드에서 직접 가져옵니다.

옵션 : 관찰 가능 어레이 또는 그 내용으로 success 메소드를 호출 할 수 있습니다. 관측 가능한 배열을 사용했을 때 인라인 편집에 이상이 생겼고 관측 가능한 배열의 내용을 사용하여 그리드가보다 안정적이라는 것을 알았습니다.

self.loadForGrid = function(pageIndex, success) { 
    /* Consider adding an argument for page size to the api call. */ 
    $.ajax({ 
     url: "api/matchingservicewebapi/GetAllMatchItemForClient/" + pageIndex, 
     type: 'GET', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
      $.each(data, function (i, obj) { 
       self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id })); 

      }); 

      /* Invoke the dataSource.read success method. */ 
      success(self.items()); 

      window.alert('User(s) loaded successfully'); 
     }, 
     statusCode: { 
      401: function (jqXHR, textStatus, errorThrown) { 
       alert('Error loading users2'); 
      } 
     } 
    }); 
}; 

데이터 원본을 본질적으로 읽기 주변의 래퍼로 만듭니다.

self.gridDataSource = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { self.loadForGrid(options.data.page, options.success); } 
    }, 
    pageSize: 20, // options.data.pageSize 
    page: 1, // options.data.page 
    serverPaging: true 
}); 

데이터 원본에 바인딩. 당신이 프로그래밍 방식으로 페이지를 변경해야하는 경우 그 후

<div data-bind="kendoGrid: gridDataSource"> </div> 

, 당신은은 dataSource에 페이지 메서드를 호출 할 수 있습니다

self.gridDataSource.page(4);