Pagwa serwera sieciowego KendoUI

Question

Używam KendoUI Grid do wyświetlania moich danych w aplikacji obsługującej KnockoutJS MVVM. Ponieważ MVVM jest architekturą po stronie klienta, utrzymuję tablicę obserwacyjną knockoutjs i ładuję dane do tej tablicy z serwera.

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

Działa to dobrze. Ale chcę zaimplementować paginację dla mojej siatki. Mogę to zrobić po stronie klienta w ten sposób. To jest mój kod widoku.

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

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

i to jest mój wiązania w pliku HTML (Użyłem Knockout-Kendo.js).

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

Ale ja chcę włączyć paginację serwera. Co oznacza, że ​​chcę, aby dane zostały ponownie załadowane (powiedzmy dane ze strony 2) do mojej tablicy obserwowalnej knockoutjs, kiedy przejdę do następnej strony (kiedy przejdę do strony 2). Jak mogę to zrobić?

Z góry dziękuję.

Answer 1

Zamiast wiązania kendoGrid z przedmiotami, musisz powiązać je z kendo.data.DataSource i określić transport.

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

Na przykład:

Dodaj parametry do przywoływania i "sukcesu" do swojej metody obciążenia. To będzie pochodzić bezpośrednio z metody odczytu w DataSource.

Opcja: Możesz wywołać metodę sukcesu za pomocą obserwowalnej tablicy lub jej zawartości. Podczas korzystania z tablicy obserwowalnej doświadczyłem anomalii z edycją liniową i stwierdziłem, że siatka jest bardziej stabilna przy użyciu zawartości tablicy obserwowalnej.

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

Utwórz źródło danych jako zasadniczo opakowanie do czytania.

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

Powiąż ze źródłem danych.

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

Po tym, jeśli trzeba programowo zmienić stronę, można wywołać metodę strony na źródła danych:

self.gridDataSource.page(4);