KendoUIグリッドサーバーのページ番号

Question

KendoUI Gridを使用して、KnockoutJS MVVM対応アプリケーションでデータを表示しています。 MVVMはクライアント側のアーキテクチャーなので、ノックアウト・オブザーバブル・アレイを維持し、サーバーからそのアレイにデータをロードしています。

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

これは問題なく動作します。しかし、私はグリッドのページ設定を実装したいと思う。私はこれのようにクライアント側にすることができます。これは私のビューモデルコードです。

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

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

そして、これが私のHTMLファイルに結合された（私はKnockout-Kendo.jsを使用しています）。

しかし、私が望むのは、サーバーページネーションを有効にすることです。つまり、私が次のページに行くとき（2ページ目に行くとき）、ノックアウトの観察可能な配列にデータを再度ロードする（2ページ目のデータを言う）ことを意味します。どうやってやるの？

ありがとうございます。

Answer 1

kendoGridをアイテムにバインドする代わりに、kendo.data.DataSourceにバインドしてトランスポートを指定する必要があります。

参考：たとえばhttp://docs.telerik.com/kendo-ui/api/javascript/data/datasource

：

は、ページングとロード・メソッドを "成功" のためのパラメータを追加します。これは、DataSourceのreadメソッドから直接取得されます。

オプション：observable配列またはその内容のいずれかを使用して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> 

あなたがプログラム的にページを変更する必要がある場合、あなたはデータソースの上にページのメソッドを呼び出すことができます。

self.gridDataSource.page(4);