如何使用 ajax 调用加载剑道网格数据答案

【问题标题】：How to load kendo grid data with ajax call如何使用 ajax 调用加载剑道网格数据
【发布时间】：2017-07-03 13:18:54
【问题描述】：

如何使用 dataSource.data 方法通过 ajax 调用加载剑道网格数据。我已经尝试过，但它不起作用。 $('#AAMaintenance').data('kendoGrid').dataSource.data(result);

function filterOnSubmit() {
    var data = {};
    data["ExaminerNo"] = $("#txtExaminerNo").val();
    data["ExaminerName"] = $("#txtExaminerName").val();   
    $.ajax(
    {
        type: 'POST',
        url: '@Url.Action("GetFilteredAAMaintenanceDetails", "AAMaintenance")',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({ aaMaintenanceFilter: data }),
        success: function (result) {                              
            $('#AAMaintenance').data('kendoGrid').dataSource.data(result);                                                       
            $('#AAMaintenance').data('kendoGrid').refresh();
        }
    });
}

【问题讨论】：

“它不工作..” 这对您的问题没有帮助。首先，您的 Ajax 调用是否成功接收指定的参数 (aaMaintenanceFilter) 和/或从服务器控制器检索数据？其次，是否有任何可能有用的控制台错误？第三，您能否发布任何其他您认为有用的代码，例如 grid/dataSource 初始化代码？最后，查看返回的数据结构 (result) 以及数据源代码也可能会有所帮助，例如确保没有指定拼写错误/不正确的数据类型等
ajax 调用成功地从控制器返回数据。这一行的问题 ('#AAMaintenance').data('kendoGrid').dataSource.data(result);
那么，简单的说，网格不显示服务器返回的数据？你能用 grid/dataSource 初始化代码更新你的问题吗？

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

假设在调用ajax 检索数据之前，尚未为 Kendo 网格控件设置 dataSource，您应该在将其设置为数据源之前对其进行实例化：

var ds = new kendo.data.DataSource({
    data: result
});

$("#AAMaintenance").data("kendoGrid").setDataSource(ds);

除此之外的一些注释，基于Telerik documentation：

如果从服务器返回的result 是一个复杂对象（目前未知），您可能需要查看schema.model。
确保column 声明field 属性与分配给您希望显示的对象属性的名称匹配，例如注意this example 中的field: "name" 列如何匹配name 属性被添加到数据源。

【讨论】：