Kendo Grid：使用来自 ajax 的数据填充答案

【问题标题】：Kendo Grid: populating with data from ajaxKendo Grid：使用来自 ajax 的数据填充
【发布时间】：2017-08-09 19:26:29
【问题描述】：

我正在尝试使用通过 ajax 检索的数据填充剑道网格。这是ajax：

    var model = @Html.Raw(Json.Serialize(Model));

            $(document).ready(function () {

                $.ajax({
                    url: "/Utilities/Report/Run",
                    data: JSON.stringify(model),
                    contentType: "application/json",
                    type: "POST",
                    success: function(result) {
                        var ds = new kendo.data.DataSource({
                            data: result
                        });
                        alert(result);
                        $("#grid").data("kendoGrid").setDataSource(ds);
                    },
                    error: function(result) {
                        options.error(result);
                    }
                });

                $("#grid").kendoGrid({
                    toolbar: ["excel", "pdf"],
                    excel: {
                        fileName: "test"
                    },
                    pdf: {
                        fileName: "test"
                    },
                });
            });

alert(result) 的数据是这样的：

[
  {"TEST":"one"},
  {"TEST":"two"},
  {"TEST":"three"}
]

ajax 调用似乎正在工作，数据对我来说看起来不错，但剑道网格没有更新，它仍然是空白的。我也没有收到任何错误。我尝试将 kendoGrid 放在 ajax 成功函数中，结果相同。我尝试在 DataSource 中使用 transport 和 read 来检索数据，但这一直给我一个错误：n.slice is not a function。然而，其他人似乎认为这是因为没有定义模式。由于我正在检索的数据类型，我无法定义这一点。从服务器检索的数据可以具有任何列/字段名称，以及任意数量的列。然而，它并不是复杂的 JSON。

如何让我的网格填充这些数据？

【问题讨论】：

伙计，我已经遇到过这个问题，但我无法重现它，也不记得解决方案。但我记得的一点是关于您传递给数据源的对象，在您的情况下为result 对象。确保它是一个 javascript 对象，而不是字符串或类似的东西（甚至注意到您添加了 contentType: "application/json"）。也许如果您尝试将其用作{ data: result } 并定义您的schema.data: "data" 只是为了帮助剑道理解您的数据。这个问题很糟糕，而且永远都会发生，我相信他们永远不会解决它。

标签： javascript jquery ajax kendo-ui kendo-grid

【解决方案1】：

我创建了一个新的数据源并将其映射到成功方法之外的现有数据源。你可以试试下面这个吗：

  var newDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Utilities/Report/Run",
                dataType: "json",
                data: JSON.stringify(model),

                error: function (result) {
                    options.error(result);
                }
            }
        }
    });

   var d1 = $("#grid").data("kendoGrid");
   d1.dataSource.data([]);
   d1.setDataSource(newDataSource );

如果我错过了任何 .剑道数据绑定总是令人困惑：D

【讨论】：

【解决方案2】：

Kendo DataSource 非常强大。理想情况下，您不需要进行手动 Ajax 调用。相反，如果 Grid 需要数据，DataSource 可以自己 Ajax 从 URL 请求数据。

https://jsfiddle.net/6gxqsrzu/

$(function() {
  var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          Freight: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          OrderDate: {
            type: "date"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    serverPaging: true,
    pageSize: 5,
    serverSorting: true,
    sort: {
      field: 'OrderDate',
      dir: 'asc'
    }
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
      },
      "Freight", {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      }, {
        field: "ShipName",
        title: "Ship Name"
      }, {
        field: "ShipCity",
        title: "Ship City"
      }
    ]
  });
});

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>

【讨论】：