Kendo Grid：填充来自ajax的数据

我想通过ajax检索数据来填充kendo网格。这里是AJAX：Kendo Grid：填充来自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成功函数中，获得相同的结果。我已经尝试在数据源中使用transport和read来检索数据，但不断给我一个错误：n.slice is not a function。但是，其他人似乎认为这是因为没有定义模式。由于我正在检索的数据的种类，我无法定义这一点。从服务器检索到的数据可以具有任何列/字段名称和任意数量的列。不过，这并不复杂。

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

来源

2017-08-09 Sunden

老弟，我已经有这样的问题，但我不能复制不记得那解决方案。但是我记得的是关于传递给dataSource的对象的东西，在你的case结果对象中。确保它是一个JavaScript对象，而不是字符串或类似的东西（甚至注意到你已经添加了'contentType：“application/json”'）。也许，如果你尝试使用它作为'{data：result}'并定义你的'schema.data：“data”'只是为了帮助剑道了解你的数据。这个问题很糟糕，它永远都会发生，我很害怕他们永远不会修复它。 – DontVoteMeDown

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

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

更改按你的需要，如果我错过了任何。 Kendo数据绑定总是令人困惑：D

来源

2017-08-09 22:38:39

Kendo DataSource功能非常强大。理想情况下，您不需要进行手动Ajax调用。相反，如果网格需要数据，DataSource可以自己从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>

来源

2017-08-09 23:01:22 Win

Kendo Grid：填充来自ajax的数据

回答

相关问题