如何使用虚拟化远程数据过滤剑道网格上的整个数据源

Posted 2023-05-07

【中文标题】如何使用虚拟化远程数据过滤剑道网格上的整个数据源

【英文标题】：How to filter whole datasource on a kendo grid with virtualized remote data

【发布时间】：2018-08-31 00:36:48

【问题描述】：

在工作中，我们遇到了具有很多行的剑道网格的性能问题。我们正在考虑使用远程数据虚拟化作为解决方案，您可以在下面的链接中看到。

https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

该解决方案的问题是，我们允许对许多列进行过滤，并且仅显示在网格页面大小中定义的行。

在下面的链接中，您可以轻松了解我的意思。我在 Telerik 演示中将 filterable 属性添加到网格中，如果我尝试添加过滤器，则只会显示渲染的行。

https://dojo.telerik.com/ayaKidet

这个问题以前在这里问过，但没有答案:(

Kendo Grid Virtualization of Lots of Data with Filters?

如果有人知道将过滤器应用于整个数据源的方法，那就太棒了。

非常感谢

【参考方案1】：

以及您在数据源中将serverSorting 设置为true（以下代码来自dojo 链接）：

$("#grid").kendoGrid(
    dataSource: 
        type: "odata",
        serverPaging: true,
        serverSorting: true,
        pageSize: 100,
        transport: 
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        
    ,
    height: 543,
    scrollable: 
        virtual: true
    ,
    sortable: true,
    filterable: true,
    columns: [
        field: "OrderID", title: "Order ID", width: 110,
        field: "CustomerID", title: "Customer ID", width: 130,
        field: "ShipName", title: "Ship Name", width: 280,
        field: "ShipAddress", title: "Ship Address",
        field: "ShipCity", title: "Ship City", width: 160,
        field: "ShipCountry", title: "Ship Country", width: 160
    ]
);

您应该将serverFiltering 设置为true。问题是，默认情况下，过滤应用于内存中的数据，但当然，并非所有满足条件的记录都已被传输，当然，您不希望在开始之前传输所有数据过滤。

    dataSource: 
        type: "odata",
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,   // Add this to your code
        pageSize: 100,
        transport: 
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        
    ,

$("#grid").kendoGrid(
  dataSource: 
    type: "odata",
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    pageSize: 100,
    transport: 
      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
    
  ,
  height: 543,
  scrollable: 
    virtual: true
  ,
  sortable: true,
  filterable: true,
  columns: [
      field: "OrderID",
      title: "Order ID",
      width: 110
    ,
    
      field: "CustomerID",
      title: "Customer ID",
      width: 130
    ,
    
      field: "ShipName",
      title: "Ship Name",
      width: 280
    ,
    
      field: "ShipAddress",
      title: "Ship Address"
    ,
    
      field: "ShipCity",
      title: "Ship City",
      width: 160
    ,
    
      field: "ShipCountry",
      title: "Ship Country",
      width: 160
    
  ]
);

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>