KendoUI Grid Server Paginierung

Question

Ich verwende KendoUI Grid, um meine Daten in einer KnockoutJS MVVM-fähigen Anwendung anzuzeigen. Da MVVM die Architektur für die Clientseite ist, verwalte ich ein beobachtbares Array von knockoutjs und lade Daten von dem Server zu diesem Array.

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'); 
      } 
     } 
    }); 
}; 

Das funktioniert gut. Aber ich möchte die Seitennummerierung für mein Raster implementieren. Ich kann es so auf der Client-Seite machen. Das ist mein Viewmodel-Code.

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

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

Und das ist meine in HTML-Datei Bindung (Ich habe die Knockout-Kendo.js verwendet).

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

Aber was ich will, ist Server Paginierung aktivieren. Das bedeutet, dass ich möchte, dass die Daten wieder in mein beobachtbares Array geladen werden, wenn ich auf die nächste Seite gehe (wenn ich auf Seite 2 gehe). Wie kann ich das machen?

Vielen Dank im Voraus.

Answer 1

Anstatt Ihr kendoGrid an Objekte zu binden, müssen Sie es an eine kendo.data.DataSource binden und einen Transport angeben.

Ref: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

Zum Beispiel:

hinzufügen Parameter für Paging und "Erfolg" zu Ihrer Load-Methode. Dies kommt direkt von der read-Methode auf der DataSource.

Option: Sie können die Erfolgsmethode entweder mit dem beobachtbaren Array oder dessen Inhalt aufrufen. Ich habe Anomalien beim Inline-Editing festgestellt, als ich das Observable-Array verwendet habe, und ich habe festgestellt, dass das Raster stabiler ist, indem ich den Inhalt des Observable-Arrays verwende.

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'); 
      } 
     } 
    }); 
}; 

Erstellen Sie Ihre Datenquelle als im Wesentlichen ein Wrapper rund um Ihre lesen.

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

Bindung an Ihre Datenquelle.

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

Danach, wenn Sie brauchen, um programmatisch die Seite zu wechseln, können Sie die Seite Methode auf die Datenquelle aufrufen:

self.gridDataSource.page(4);