Kendo Grid with server filtering but client side paging

Question

Hello i have a kendo grid with server filtering enabled and because of complicated sql script and performance optimalizations i load all my data at once so i have serverPaging set at false. But when i click next page button in my grid or change page size i allways send new request to the server and will load again same data. Is there any way to have server filtering enabled and to set my grid to do clinet side paging? Here s constructor parameters for my grid object.

{
    dataSource: {
        serverFiltering: true,
        pageSize: 10,
        transport: {
            read: {
                url: "url",
                dataType: "json",
                type: 'POST',
                contentType: "application/json;charset=UTF-8"
            },
            parameterMap: function (data) {
                return JSON.stringify(data);
            }
         }
    },
    columns[...],
    pageable: {
        pageSizes: [10, 25, 50, 100],
        buttonCount: 3
    }
}

Joe Glover Joe Glover · Accepted Answer · 2019-08-06T10:03:26

Separating the grids data operations between server and client is not generally recommended, as detailed in the documentation:

All data operations have to occur either on the server or on the client. While you can still determine that part of the data operations will be held on the server and part on the client, using the DataSource in its mixed data-operation mode leads to undesired side effects. For example, if serverPaging is enabled and serverFiltering is disabled, the DataSource will filter only the data from the current page and the user will see less results than expected. In other scenarios, the DataSource might make more requests than necessary for the data operations to execute.

It seems that the very last part applies to your scenario. One possible workaround would be to implement your transport.read as a function, which allows you to take full control of how the data is retrieved. You could cache the data in the browser and then re-use it, using something like this:

<script>
var resultCache;
var dataSource = new kendo.data.DataSource({
  serverFiltering: true,
  pageSize: 10,
  transport: {
    read: function(options) {
      if (resultCache != null) {
        options.success(resultCache);
      } else {
        $.ajax({
          url: "url",
          dataType: "json",
          success: function(result) {
            resultCache = result;
            // notify the data source that the request succeeded
            options.success(result);
          },
          error: function(result) {
            // notify the data source that the request failed
            options.error(result);
          }
        });
      }
    }
  }
});
</script>

Kendo Grid with server filtering but client side paging

1 Answers