Paginación del servidor KendoUI Grid

Question

Estoy usando KendoUI Grid para mostrar mis datos en una aplicación KnockoutJS MVVM habilitada. Como MVVM es la arquitectura para el lado del cliente, estoy manteniendo una matriz observable knockoutjs y cargando datos a esa matriz desde el servidor.

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

Esto funciona bien. Pero quiero implementar la paginación para mi grilla. Puedo hacerlo del lado del cliente de esta manera. Este es mi código de modelo de vista.

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

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

Y esta es mi unión en el archivo HTML (He utilizado el Knockout-Kendo.js).

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

Pero lo que quiero es habilitar la paginación del servidor. Lo que significa que quiero que los datos se carguen nuevamente (digamos datos de la página 2) en mi matriz observable de knockoutjs cuando vaya a la página siguiente (cuando voy a la página 2). ¿Cómo puedo hacer eso?

Gracias de antemano.

Answer 1

En lugar de vincular su kendoGrid a elementos, deberá vincularlo a un kendo.data.DataSource y especificar un transporte.

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

Por ejemplo:

añadir parámetros para paginación y el "éxito" a su método de carga. Esto vendrá directamente del método de lectura en DataSource.

Opción: Puede llamar al método de éxito con la matriz observable o su contenido. Experimenté anomalías con la edición en línea cuando utilicé la matriz observable, y encontré que la cuadrícula era más estable al usar los contenidos de la matriz observable.

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

Cree su fuente de datos como un envoltorio esencialmente alrededor de su lectura.

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

Enlazar con el origen de datos.

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

Después de eso, si necesita cambiar mediante programación la página, puede invocar el método de página en la fuente de datos:

self.gridDataSource.page(4);