如何从 ajax 查询将数据绑定到 kendoui 网格？

Posted 2023-02-15

【中文标题】如何从 ajax 查询将数据绑定到 kendoui 网格？

【英文标题】：How to bind data to a kendoui grid from an ajax query?

【发布时间】：2012-06-30 04:47:26

【问题描述】：

我在页面上有一个日期选择器和一个网格。我希望根据日期选择器中的日期填充网格。我已经使用 grid.dataBind 使用 Telerik mvc 网格完成了这项工作。

var grid = $('#Grid').data('tGrid');
var pDate = document.getElementById('DatePicker').value;
$.ajax(

  type: 'POST',
  url: '/Home/AccountSummary/',
  dataType: 'json',
  data:  date: pDate ,
  success: function (result) 
    grid.dataBind(result);
  
);

现在我想做同样的事情，除了 Kendoui 网格。我知道我需要使用$('#Grid').data('kendoGrid') 来获取网格。但是如何将结果绑定到网格？

【参考方案1】：

假设 result 变量包含一个 javascript 对象数组，并且它包含与原始标记相同的列数的数据。

即。 result = ["AccountId":1,"Name":"AAA","AccountId":2,"Name":"BBB"];

尝试以下方法：

$.ajax(

    type: 'POST',
    url: '/Home/AccountSummary/',
    dataType: 'json',
    data:  date: pDate ,
    success: function (result) 
        $("#Grid").data("kendoGrid").dataSource.data(result);
    
);

【讨论】：

如果我添加行 $("#Grid").data("kendoGrid").dataSource.fetch();在 dataSource.data(result) 之后，这对我有用。出于某种原因，如果没有 fetch()，它就无法工作。谢谢。

@Daniel 你有任何与网格相关的事件监听器吗？他们会阻止一些事情吗？分配新数据实际上会刷新整个网格，如果您逐步浏览 kendo.web.js，您将确切地看到发生了什么。对于刷新，您可以尝试在数据源上调用 fetch 或 read 函数。

@Daniel - fetch 语句正是我想要的，谢谢！

@Igorrious 以这种方式剑道日期时间格式不起作用如何解决？？

【参考方案2】：

你也可以这样做：

var dataSource = new kendo.data.DataSource(
    transport: 
        read: function(options) 
            $.ajax(
                type: "POST",
                url: "Controller/Handler",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify(key: "value"),
                success: function(data) 
                    options.success(data);
                
            );
        
    
);

然后将其绑定到网格：

var grid = $("#grid").kendoGrid(
    dataSource: dataSource

通过这种方式，您可以将其余的 CRUD 操作添加到您的传输中，并将所有代码放在一个地方。

【讨论】：

如果您需要服务器端分页，这个解决方案非常棒，这需要传输 ajax 方法。

【参考方案3】：

您可以将 Json 结果绑定到网格。如果需要，您也可以传递模型。比如下面的代码sn-p。

更多详情请见here。

$('#FindBtn').click(function (e) 
    e.preventDefault();
    var UserDetails =
    
        "FirstName": document.getElementById('FirstName').value,
        "LastName": document.getElementById('LastName').value,
    ;
    $.ajax(
        url: "SearchJsonRequest",
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(UserDetails),
        dataType: "json",
        success: function (data) 
            var grid = $('#AssociateSearch').getKendoGrid();
            grid.dataSource.data(data);
            grid.refresh();
        
    );
    return false;
);

【参考方案4】：

延伸到 Igorrious... 这个确切的答案对我没有帮助，但它引导我找到了答案。

什么对我有用：

$.ajax(
  
    type: 'POST',
    url: '/Controller/Action',
    data: 
      paramKey: paramValue
    ,
    success: function (result) 
      $("#my-grid").data("tGrid").dataBind(result);
    
); 

如果这对您没有帮助，请进行一些 javascript 调试以找出为什么链 [$("#my-grid")] . [data("tGrid")] . [dataBind] 中的某些元素具有 value == 'undefined'。

【讨论】：

Tnx。我删除了它，但找不到另一个替换它... :(