Question

我无法在kendo网格中绑定搜索结果。我已多次尝试过，我有四天遇到麻烦，我不知道这里有什么问题，

当我调试动作时，一切正常，数据正常，返回网格结果没问题，但结果没有显示在剑道中。

这是我的代码：

<script>

  $(function() {

    $("a.k-button").on('click', function (e) {

      debugger;
      e.preventDefault();

      var dataObj = serializeByFieldsWrap(".invoiceForm");
      var dataUrl = $(this).data('url');

      // dataObj.ToolboxId = toolboxId;

      $('body').css('cursor', 'wait');

      var result = $.ajax({
        type: "POST",
        url: dataUrl,
        dataType: 'json',
        data: dataObj,
        //complete:  $("#invoices-grid").data("kendoGrid").data.read(),

      });

      result.done(function (data) {
        console.log(data);

        var grid = $('#invoices-grid').data("kendoGrid");
        grid.dataSource.data(data);
      });

      result.fail(function (error) {
        console.log(error);
      });

    });

  });

</script>

控制器：

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

Kendo UI Grid：

<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" },
            },
            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: "Status",
              title: "@T("gp.Jobs.Fields.Status")",
              template: '#= Status #'
            },*@
             {
               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>

Answer 1

DataSourceResult格式化您的服务器响应：

{
    Data: [ {JobNumber: "...", FieldName: "bar", ... } ],
    Total: 100
}

换句话说，数据项数组已分配给Data字段，并且总项数已分配给Total字段。 Kendo UI DataSource配置必须通过设置schema.data和schema.total来考虑这一点：

http://docs.telerik.com/kendo-ui/framework/datasource/crud#schema

http://docs.telerik.com/kendo-ui/framework/datasource/crud#read-remote

schema: {
    data: "Data",
    total: "Total"
}

绑定搜索结果

1 个答案: