KendoUI MVC grid doesn't show data for pages except first page

Question

I have a KendoUI MVC grid as follows:

@(Html.Kendo().Grid<MonitoringVm>()
          .Name("monitoringGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.RecordDateTime).Title("Date Time").Format("{0:dd/MM/yyyy hh:mmtt}").Width(149);
              columns.Bound(c => c.SourceEndpointName).Title("Source").Width(100).Sortable(true);
              columns.Bound(c => c.DestinationEndpointName).Title("Destination").Width(100);
              columns.Bound(c => c.TagName).Title("Tag").Width(120);
              columns.Bound(c => c.ErrorDescription).Title("Description");
              columns.Bound(c => c.LogTransferErrorId).Title("Retry")
                  .ClientTemplate("<div style='text-align: center;'><button class='k-button k-primary' type='button' onclick=\"javascript: retryRequest(this);\">Retry</button></div>")
                  .HeaderTemplate("<div style='text-align: center;'>Retry</div>")
                  .Width(50);
              columns.Bound(c => c.LogTransferErrorId).Title("Delete")
                  .ClientTemplate("<div style='text-align: center;'><img src='/Content/Images/iconfinder_bin.png' onclick=\"javascript: confirmArchiveError('#:data.LogTransferErrorId#');\" class='archive-error'/></div>")
                  .HeaderTemplate("<div style='text-align: center;'>Delete</div>")
                  .Width(50);
          }
          )
          .Pageable()
          .Sortable(sortable => sortable.AllowUnsort(true))
          .ClientDetailTemplateId("template")
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(25)
              .ServerOperation(true)
              .Read(read => read.Action("ReadErrorRecords", "Monitoring"))
          )
          .Events(events => events.DataBound("dataBound")))

The corresponding controller is as follows:

private readonly JsonHttpClient _client;
public JsonResult ReadErrorRecords([DataSourceRequest]DataSourceRequest request)
    {
        var urlEndpoint = $"Monitor/ErrorRecords?page={request.Page}&pageSize={request.PageSize}";
        var response = _client.Get<MonitoringVmResponse>(urlEndpoint);

        DataSourceResult result = response.Results.ToDataSourceResult(request);
        result.Total = response.Count ?? 0;
        return Json(result);
    }

When I navigate to different pages, the above controller method is called. In debugger, I observed that I receive the correct data and the same is returned from the controller.

On the UI, for subsequent pages after the first page, data is not shown. What am I missing?

Answer 1

It seems like you're doing pagination twice.

Let's say you issued a request for the second page. I suppose that your _client.Get<MonitoringVmResponse>(urlEndpoint) would return records from 26 to 50. But later you're calling response.Results.ToDataSourceResult(request) which also applies .Skip(25) and .Take(25) internally so all of your items from the previous call will be skipped and no data will be returned to your view.

I guess there are 2 possible workarounds for this:

1. Instead of .ToDataSourceResult(request) it's possible to use other Kendo extension methods like GroupBy, OrderBy, Where etc.
2. It's possible to "fool" .ToDataSourceResult(request) method by providing a value 1 as a request.Page:

    var response = _client.Get<MonitoringVmResponse>(urlEndpoint);
    request.Page = 1;
    DataSourceResult result = response.Results.ToDataSourceResult(request);