Question

我尝试使用通过ajax检索的数据填充kendo网格。这是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调用似乎正常工作，数据看起来不错，但是kendo网格没有更新，它仍然是空白的。我也没有得到任何错误。我已经尝试将kendoGrid置于ajax成功函数中，但结果相同。我尝试在DataSource中使用transport和read来检索数据，但却一直给我一个错误：n.slice is not a function。但是，其他人似乎认为这是因为没有定义架构。由于我正在检索的数据类型，我无法定义。从服务器检索的数据可以包含任何列/字段名称和任意数量的列。然而，它不是复杂的JSON。

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

Answer 1

我创建了一个新的Datasource并将其映射到success方法之外的现有数据源。你能试试下面这个：

  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

Answer 2

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

https://jsfiddle.net/6gxqsrzu/

＆＃13;

$(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"
      }
    ]
  });
});

＆＃13;

    <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>

＆＃13;

Kendo Grid：填充来自ajax的数据

2 个答案: