将结果绑定到kendoGrid

时间:2016-09-22 11:40:19

标签: model-view-controller kendo-ui kendo-grid

在下面的代码中,我将绑定控制器操作的网格结果。一切都很完美,但方法并没有停止加载。始终是methid正在执行。这是我的代码:

<script>

  $(function() {
    $("#invoices-grid").kendoGrid({

      dataSource: {

        type: "json",
        transport: {
          read: {
            url: "@Html.Raw(Url.Action("List", "Finances"))",
            type: "POST",
            dataType: "json",
            data: additionalData
          },

        },
        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
      },
      dataBound: function () {
        var row = this.element.find('tbody tr:first');
        this.select(row);
      },

      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: "inline"
      },
      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);
          }

        });

        var grid = $('#invoices-grid').data('kendoGrid');
        grid.dataSource.page(1);

      },


      rowTemplate: kendo.template($("#invoiceRowTemplate").html()),

    });
  });

</script>

控制器代码:

    [HttpPost]
    public ActionResult List(DataSourceRequest command, FinanceListModel model)
    {
        var searchString = model.SearchJobItemNumber;
        var isChecked = model.IsChecked;
        var invoices = _invoiceService.GetAllInvoices(searchString, isChecked);

        var gridModel = new DataSourceResult
        {
            Data = invoices.Select(x =>
            {
                var jobModel = x.ToModel();
                return jobModel;
            }),
            Total = invoices.TotalCount
        };


        return Json(gridModel, "application/json", JsonRequestBehavior.AllowGet);


    }

1 个答案:

答案 0 :(得分:0)

dataBound事件处理程序中,调用select方法,触发change事件,然后调用page方法,触发新方法请求和新dataBound。通过这种方式,您创建了一个无限循环。

我不确定更改处理程序中分页的目的是什么,但是这整个设置无法以这种方式工作 - 考虑重新处理它。