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

问题描述

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

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演示中将filterable属性添加到网格中，如果尝试添加过滤器，则仅显示渲染的行.

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虚拟化吗? /a>

Kendo Grid Virtualization of Lots of Data with Filters?

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

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

非常感谢您

推荐答案

以及在数据源中将serverSorting设置为true的情况(以下代码来自dojo链接):

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>

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