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.

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 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.

Thank you very much

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

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" rel="nofollow noreferrer noopener" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" rel="nofollow noreferrer noopener" />
<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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0