How to filter whole datasource on a kendo grid with virtualized remote data

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 t

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