How to filter whole datasource on a kendo grid wit

Question

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

Answer 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" />
<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>