Kendo MVC Grid paging buttons not changing results displayed

Question

I have a Kendo Grid. The paging numbers are ok, items per page is ok, but when I press on page number the results in grid isn't changing, all results are shown in first page. Please help here.

Below is my code:

<script>
    $(function() {
        $("#invoices-grid").kendoGrid({
            dataSource: {
                data: @Html.Raw(JsonConvert.SerializeObject(Model.Invoices)),
                schema: {
                    model: {
                        fields: {
                            JobNumber: { type: "string" },
                            CustomerName: { type: "string" },
                            DepartmentName: { type: "string" },
                            DateInvoice: { type: "string" },
                            ValidDays: { type: "number" },
                            Delivery: { type: "string" },
                            IsPayed: { type: "boolean" },
                            Payed: { type: "number" },
                            Status: { type: "boolean" },
                        }
                    }
                },
                @*type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("List", "Finances"))",
                        type: "POST",
                        dataType: "json",
                        data: additionalData1
                    },
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                },*@
                error: function(e) {
                    display_kendoui_grid_error(e);
                    // Cancel the changes
                    this.cancelChanges();
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
          
            columns: [
                {
                    field: "JobNumber",
                    title: "@T("gp.Invoice.Fields.JobNumber")",
                    template: '#= JobNumber #'
                },
                {
                    field: "CustomerName",
                    title: "@T("gp.Invoice.Fields.CustomerName")",
                    template: '#= CustomerName #'
                },
                {
                    field: "DepartmentName",
                    title: "@T("gp.Invoice.Fields.DepartmentName")",
                    template: '#= DepartmentName #'
                },
                {
                    field: "DateInvoice",
                    title: "@T("gp.Invoice.Fields.DateInvoice")",
                    template: '#= DateInvoice #'
                },
                {
                    field: "ValidDays",
                    title: "@T("gp.Invoice.Fields.ValidDays")",
                    template: '#= ValidDays #'
                },
                {
                    field: "Delivery",
                    title: "@T("gp.Invoice.Fields.Delivery")",
                    template: '#= Delivery #'
                },
                {
                    field: "Payed",
                    title: "@T("gp.Invoice.Fields.IsPayed")",
                    template: '#= (Payed == 2) ? "Комп." : ((Payed == 1) ? "ДЕ" : "НЕ") #'
                },
                {
                    field: "Id",
                    title: "@T("Common.Edit")",
                    width: 100,
                    template: '<a href="Edit/#=Id#">@T("Common.Edit")</a>'
                },
            ],
            pageable: {
                refresh: true,
                pageSizes: [5, 10, 20, 50]
            },
            editable: {
                confirmation: false,
                mode: "popup"
            },
            scrollable: false,
           
            selectable: true,
            change: function(e) {
                var selectedRows = this.select();

                var jobId = parseInt($(selectedRows).data('job-id'));
                var jobItemId = parseInt($(selectedRows).data('job-item-id'));

                var result = $.get("@Url.Action("SideDetails", "Production")/" + jobItemId);

                result.done(function(data) {

                    if (data) {
                        $(".job-edit .jobItemDetails").html(data);
                    }

                });
             
            },
           
            rowTemplate: kendo.template($("#invoiceRowTemplate").html()),
        });
    });
</script>

protected virtual void PrepareInvoiceFinanceListModel(FinanceListModel model,FormCollection form/*,string SearchJobItemNumber*/)
{
    var customers = model.SearchCustomerId;
    var isChecked = model.IsChecked;
    var searchString = model.SearchJobItemNumber;
    var IsChecked1 = model.IsChecked1;
    // searchString = model.SearchJobItemNumber;/* "001/2016";*/
    //var searchString = model.SearchJobItemNumber;
    //searchString = "091/2016";
    
    if (model == null)
        throw new ArgumentNullException("model");

    var finishedJobs = _jobService.GetJobsByHasInvoice(false);

    finishedJobs = finishedJobs.OrderByDescending(x =>
        {
            var firstOrDefault = x.JobItems.FirstOrDefault();
            return firstOrDefault?.DateCompletition ?? new DateTime();
        }).ToList();

    foreach (var job in finishedJobs)
    {
        var jobModel = job.ToModel();
        model.FinishedJobs.Add(jobModel);
    }

    var jobsBycustomers = finishedJobs.GroupBy(x => new { x.CustomerId, x.Customer.Name }).Select(x => new JobCustomersModel()
    {
        CustomerId = x.Key.CustomerId,
        CustomerName = x.Key.Name,
        JobsCount = x.Count(),
    });

    model.FinishedJobStatus = new JobStatusesModel()
    {
        Status = _localizationService.GetResource("gp.jobs.whitout.invoice"),
        Value = (int)JobStatusEnum.Finished,
        Count = finishedJobs.Count,
        CustomersJobs = jobsBycustomers.ToList()
    };

    var invoices = _invoiceService.GetAllInvoices(searchString, isChecked, IsChecked1, customers);
    foreach (var invoice in invoices)
    {
        var inv = invoice.ToModel();
        // var a = invoice.Payed;
        model.Invoices.Add(inv);
    }
    
    /////////////////////             ////////////////////////
    //var allCustomers = _invoiceService.GetAllCustomers(customers);
    //foreach (var customer in allCustomers)
    //{
    //    var cust = customer.ToModel();
    //    model.SearchCustomerId = customer.CustomerId;
    //    model.Invoices.Add(cust);
    //}

    var invoiceByCustomer = invoices
        .GroupBy(x => new { x.CustomerId, x.CustomerName })
        .Select(x => new JobCustomersModel()
        {
            CustomerId = x.Key.CustomerId,
            CustomerName = x.Key.CustomerName,
            JobsCount = x.Count(),
        });

    model.InvoiceStatus = new JobStatusesModel()
    {
        Status = _localizationService.GetResource("gp.jobs.with.invoice"),
        Value = (int)JobStatusEnum.Finished,
        Count = invoices.Count,
        CustomersJobs = invoiceByCustomer.ToList()
    };

    var latestOffers = _offerService.GetLatestOffers(0, 10);
    foreach (var offer in latestOffers)
    {
        var offerModel = offer.ToModel();
        model.LatestOffers.Add(offerModel);
    }
}

Answer 1

Currently server operations are enabled...

serverPaging: true,
serverFiltering: true,
serverSorting: true

... but the transport configuration is commented out. This is the cause of the problem.

If you want to use server operations, then configure the dataSource transport. Otherwise, use local data binding and disable server operations, as in this example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="invoices-grid"></div>

    <script>
      $(function() {

        var d = [];

        for (var i = 1; i <= 100; i++) {
          d.push({Id: i, CustomerName: "CustomerName " + i});
        }

        $("#invoices-grid").kendoGrid({
          dataSource: {
            data: d,
            schema: {
              model: {
                id: "Id",
                fields: {
                  CustomerName: { type: "string" }
                }
              }
            },

            error: function(e) {
              display_kendoui_grid_error(e);
              // Cancel the changes
              this.cancelChanges();
            },
            pageSize: 20,
            //serverPaging: true,
            //serverFiltering: true,
            //serverSorting: true
          },


          columns: [

            {
              field: "CustomerName",
              title: "gp.Invoice.Fields.CustomerName",
              template: '#= CustomerName #'
            },
            {
              field: "Id",
              title: "Common.Edit",
              width: 100,
              template: '<a href="Edit/#=Id#">Common.Edit</a>'
            },

          ],
          pageable: {
            refresh: true,
            pageSizes: [5, 10, 20, 50]
          },
          editable: {
            confirmation: false,
            mode: "popup"
          },
          scrollable: false,

          selectable: true,
          change: function(e) {
          }


        });
      });

    </script>

  </body>
</html>