如何使用Kendo-ui网格虚拟化远程数据？

我使用kendo-ui网格为AngularJs并且想要激活virtualization of remote data功能。为了测试，我设置了pageSize: 5。下面是从Telerik的网站virtualization of remote data描述：如何使用Kendo-ui网格虚拟化远程数据？

有些时候你可能需要在电网大数据量的操作，并且获取和同时处理该数据将并处由于性能上的损失限制浏览器资源。幸运的是，Kendo UI网格有一个名为数据虚拟化的解决方案，可以缓解在处理大量数据时产生的任何减速。当通过可滚动 - >虚拟配置选项启用后，它将为网格内容显示一个垂直滚动条，并仅显示通过网格数据源的pageSize属性设置的项目数。拖动滚动条并超出pageSize后，会自动请求检索并呈现下一组网格行。网格虚拟化功能支持本地和远程数据，而在此演示中，记录从远程端点获得。

而且我已经设置如下：

HTML：

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

JS电网：

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

在Telerik的网站（官网），它说，没有更多的需求要做。在滚动时，我应该看到服务器的请求，在我的情况下应该是dataservice.getImportResultReport()调用。但是这不会发生。该函数仅被调用一次，并返回所有数据。

可能是因为我没有设置type: "odata"？但是我使用另一种类型的数据源。

如何使用此功能？

来源

2017-09-01 Seva

究竟你'远程data'的虚拟化是什么意思？你想在剑道网格中显示数据吗？ –

我添加了这个功能的描述。 – Seva

好吧，明白了，你也可以告诉你用什么html来呈现剑道网格？ angularjs语法看起来不错，但我想你可能错过了在html –

添加k-scrollable指令，因为在你的HTML呈现您的剑道格如下：

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

而且你必须使用k-data-source指令为您的数据源。希望能帮助到你。

工作演示plunkr

来源

2017-09-01 16:39:17

如何使用Kendo-ui网格虚拟化远程数据？

回答

相关问题