リモートデータの仮想化にKendo-uiグリッドを使用するには？

Question

私はAngularJsのkendo-uiグリッドを使用しており、virtualization of remote dataの機能を有効にしたいとします。テストのために私はpageSize: 5を設定しました。以下 はtelerikサイトからvirtualization of remote dataの説明である：

あなたは、グリッド内のデータ の大量で動作する必要があるかもしれない、と一度にこのデータをフェッチし、処理して によるパフォーマンスのペナルティを課す際にケースがあります限られたブラウザリソースに 幸い、剣道のUIグリッドにはデータ仮想化 というソリューションがあり、膨大な量の データで動作するときの速度低下を緩和します。 scrollable-> virtual設定オプションで有効にすると、 グリッドコンテンツの垂直スクロールバーが表示され、 ソースのpageSizeプロパティを使用して設定された項目数が だけレンダリングされます。スクロールバーをドラッグしてpageSizeを超えると、 はグリッド の次の行を取得してレンダリングするという自動要求を行います。ローカルデータとリモートデータの両方がグリッド 仮想化機能でサポートされていますが、このデモではリモートエンドポイントからレコードが になります。

また、私は次のように設定している：

は

HTML：グリッドの

<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div> 

JS：telerikサイト（公式サイト）で

var vm = $scope; 
vm.viewMode = { 
    mainGridOptions: { 
    visible: true 
    } 
}; 
vm.mainGridOptions = { 

      columns: [ 
       // here columns 
      ], 
      onRegisterApi: function (gridApi) { 
       vm.gridApi = gridApi; 
      }, 
      dataSource: { 
       schema: { 
        model: { 
         fields: { 
          YearBalance: { type: 'number' }, 
          Typezalezh: { type: 'string' }, 
          License: { type: 'string' }, 
          ObjectName: { type: 'string' }, 
          ZalezhName: { type: 'string' }, 
          PlastName: { type: 'string' }, 
          Category: { type: 'string' }, 
          Parameter: { type: 'string' }, 
          LastVal: { type: 'string' }, 
          Val: { type: 'string' }, 
          Operation: { type: 'string' }, 
          EndT: { type: 'date' } 
         } 
        } 
       }, 

       pageSize: 5, 
       transport: { 
        read: function(e) { 
         dataservice.getImportResultReport().then(function(data) { 
          e.success(JSON.parse(data)); 
          console.log(data); 
         }); 
        } 
       } 
      }, 
      serverPaging: true, 
      height: screen.height - 330, 
      minwidth : 1190, 
      batch: true, 
      scrollable: { 
       virtual: true 
      }, 
      sortable: true, 

      serverSorting: true, 
      filterable: { 
       extra: false, 
       operators: { 
        string: { 
         // here filters 
        }, 
        number: { 
         // here filters 
        }, 
        date: { 
         // here filters 
        } 
       } 
      } 
     }; 

は、それが言う何よりも必要であること行われなければ。 スクロールすると、私の場合はdataservice.getImportResultReport()コールであるべきであるというサーバーへの要求が表示されるはずです。しかし、これは起こりません。この関数は1回だけ呼び出され、すべてのデータが返されます。

type: "odata"を設定していない可能性がありますか？しかし、私は別のタイプのデータソースを使用します。

この機能の使用方法は？

<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div> 

また、あなたがあなたのDataSourceのk-data-sourceディレクティブを使用する必要があります：あなたの剣道グリッドをレンダリングしてHTMLに次のように

Answer 1

はk-scrollableディレクティブを追加します。それが役に立てば幸い。

作業するデモplunkr