如何使用虚拟化远程数据过滤剑道网格上的整个数据源 [英] How to filter whole datasource on a kendo grid with virtualized remote data

问题描述

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

At work, we are having performances issues with a kendo grid that has a lot of row. We are thinking about using virtualization of remote data as a solution like you can see on the link below.

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

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

The problem we have with that solution is that we allow filters on a lots of our columns and only the rows that are defined in the pagesize of the grid are displayed.

在下面的链接中，您可以很容易地明白我的意思.我在 Telerik 演示中向网格添加了可过滤属性，如果我尝试添加过滤器，则只显示渲染的行.

In the link below, you can easily see what I mean by that. I added the filterable attribute to the grid in the telerik demo and only the rendered row are displayed if I try to add a filter.

https://dojo.telerik.com/ayaKidet

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

The question was previously asked here but without an answer :(

Kendo Grid 使用过滤器对大量数据进行虚拟化?

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

If anyone know of a way to apply the filter to the whole datasource it would be awesome.

非常感谢

推荐答案

以及您在数据源中将 serverSorting 设置为 true (以下代码来自道场链接):

As well as you have set serverSorting to true in your datasource (the following code is from the dojo link):

$("#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.问题是，默认情况下，过滤是对内存中的数据应用的，但是当然并不是所有满足条件的记录都已经被传输了，当然你不想在开始之前传输所有数据过滤.

you should set serverFiltering to true. The question is that, by default, filtering is applied to the data that is in memory but, of course, not all records that meet the condition have already been transferred and, of course, you don't want to transfer all data before start filtering.

    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>

这篇关于如何使用虚拟化远程数据过滤剑道网格上的整个数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！